shadcn.io is an independent project built on shadcn/ui
22 read-only tools. Every component tool takes a framework (react, vue, svelte, solid) and, for React, a base (base, ark, radix, aria): your agent reads both from your package.json. Each tool has a page with its inputs, example prompts and a real response.
How an agent uses them
- 01 · Findsearch_componentssearch_demoslist_componentsFrom what the user asks for, a pattern, or by browsing.
- 02 · Addget_componentincludeWhat it is, and in the same call its install, usage and a demo.
- 03 · Detailsget_component_apiget_demoget_component_docsget_guideOnly what's needed next: one part's props, another demo, the docs, a guide.
- 04 · Installget_install_commandReactget_install_planVue · Svelte · SolidOne command, or every file and package.
The cheap calls come first: a search, then get_component (no code) to check the fit. The docs, a demo or the source only for the one it picks, then the install.
Discover
Find any component, utility or hook for your framework and primitives: the catalog by category, ranked search that knows a modal is a dialog, and search across every demo for a pattern.
- list_componentsThe catalog, by category
- search_componentsRanked search with aliases
- search_demosFind the demo of a pattern, across every component
Inspect
A component and what you need of it, in one call: its install, usage and a demo. Then only what's next: one part's props, another demo, the docs or the source.
- get_componentA component, and what you need of it, in one call
- get_component_apiProps, data attributes, CSS variables, keyboard
- get_component_docsThe docs page as Markdown, by section
- get_guideForms, theming, colors and RTL, as Markdown
- get_demoA demo's code, ready to paste
Blocks
Whole sections and app screens (a pricing page, a kanban board, a chat window) on all seven targets: search by what they do, browse the categories, get one with its install, or plan a page as a stack of blocks.
- search_blocksFind a section or screen by what it does
- list_blocksThe block catalog, by category and group
- get_blockA block, and what you need of it, in one call
- plan_pageA page as an ordered stack of blocks
Install
A project's setup, once, then one add command with your token for any framework (several components at once): the shadcn CLI for React and Solid, shadcn-vue, shadcn-svelte. Or every file and package, without a CLI.
- get_install_commandThe shadcn CLI command, token included
- get_install_planEvery file and package an install needs
- get_project_setupInit a project: preset, theme, aliases
Icons
Search 294k icons across 222 libraries by meaning, then add them: the import from the set's package, or a component for your framework.
- list_icon_librariesEvery icon library, most used first
- search_iconsSearch 294k icons across 222 libraries
- get_iconThe import, or a component, for any framework
Design
A real brand's design system as a DESIGN.md (colors, type, spacing and components from 500 brands) for your agent to match a look, and templates to start a project from.
- search_designs500 brands' design systems, by name, product or color
- get_designA brand's DESIGN.md, whole or by section
- search_templatesTemplates to start from, by what the app is
Account
Who your agent is connected as, your plan, and how many calls are left this minute.
Call one by hand
Every tool is a JSON-RPC tools/call to your MCP URL. Your client sends it for you; to try one without a client, post it yourself. The server answers in server-sent events, the result on the data: line.
FAQ
How many tools does the shadcn MCP have?
22, all read-only. Each page below has the inputs, a prompt, and a real response.
Which tool should my agent call first?
search_components when you describe the job. get_component when you already know the name.
Do the tools work for Vue, Svelte, and Solid?
Yes. Pass framework, and for React a base. Your agent reads both from package.json. Frameworks and bases lists every target.