shadcn.io is not affiliated with official 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" }){
"count": 3,
"query": "modal",
"results": [
{
"category": "Overlays",
"description": "A modal window that appears on top of the main content.",
"name": "dialog",
"title": "Dialog"
},
{
"category": "Overlays",
"description": "A modal for critical confirmations and destructive actions.",
"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.