shadcn.io is an independent project built on shadcn/ui
- Group
- Discover
- Inputs
querybase?framework?limit?- Access
- Read-only
When to use it
- The user says what they need ("a modal", "a date range") rather than naming a component.
- Before writing a component from scratch: check it isn't already here.
Inputs
querystring
What it does: "modal", "file upload".
base?"base" | "aria" | "ark" | "radix"
React only. Default base (Base UI).
- Type
"base" | "aria" | "ark" | "radix"
framework?"react" | "vue" | "svelte" | "solid"
Default react.
- Type
"react" | "vue" | "svelte" | "solid"
limit?numberExample prompts
Name the server, so the agent doesn't answer from memory:
Call and response
Asked “I need a modal for my React Aria app”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.
search_components({ base: "aria", limit: 3, query: "modal" }){
"blocks": {
"count": 150,
"next": "search_blocks({ query: \"modal\" }) has them all; get_block adds one.",
"top": [
{
"category": "dialog",
"group": "Games and small rituals",
"line": "A chess trainer's profile with its achievement dialog shown open over a drawn player card: a medal that fills in, the tier in words and dots…",
"slug": "dialog-achievement-unlock",
"title": "Achievement Unlock Dialog",
"url": "https://kit.dev/blocks/aria/dialog-achievement-unlock"
},
{
"category": "dialog",
"group": "Payments and plans",
"line": "A transit wallet's payment methods page with its add-card dialog shown open: a card drawn in greys that fills in as you type, a number that …",
"slug": "dialog-add-card",
"title": "Add Card Dialog",
"url": "https://kit.dev/blocks/aria/dialog-add-card"
},
"… 1 more"
]
},
"count": 3,
"query": "modal",
"results": [
{
"category": "Overlays",
"description": "A window over the page for a short task, with focus trapped until people finish or cancel. For React with React Aria, when Escape or Cancel …",
"name": "dialog",
"title": "Dialog"
},
{
"category": "Overlays",
"description": "Stop the page until the reader confirms or cancels a destructive step. For React with React Aria, when a click outside should not skip the c…",
"name": "alert-dialog",
"title": "Alert Dialog"
},
"… 1 more"
],
"target": "React · React Aria"
}
Call it by hand
Your MCP client sends this for you. To try the tool without one, post the call yourself; the server answers in server-sent events, the result on the data: line.
What your agent reads
The server's description of search_components, one of the Discover tools. Your agent reads it to decide when to call the tool:
Find components by what they do ("modal", "date range"): names, descriptions and aliases, best first, each with the demo the query names (demo, for get_demo). Call it before writing a component yourself.Next
- get_componentA component, and what you need of it, in one call
- get_component_docsThe docs page as Markdown, by section
FAQ
What happens if no component matches?
Nothing, and where to look: a guide that covers it (forms, theming, RTL), search_demos, or list_components. A weak match is dropped rather than shown: a wrong answer costs an agent more than none.
How does search treat names from other libraries?
The names other libraries use: a modal is a dialog, a toast a sonner, a chip a badge, a multiselect a combobox. An alias ranks just under a direct match, in the order it's listed.
Why does a search result include a demo?
The demo the rest of the query names: "date range picker" finds the date picker with its Range demo, "button with icon" the button with With Icon. get_demo takes it as demo.