shadcn.io is an independent project built on shadcn/ui
The shadcn.io MCP server gives your AI agent the registry, live. It searches the components, reads their docs and demos, installs them for your project's framework and primitives, and adds icons from 222 libraries. Your agent stops guessing props and writing components from memory.
MCP, the Model Context Protocol (opens in a new tab), is how AI editors connect to tools like this one. You add one URL to your editor once; from then on, your agent calls the server's tools whenever a prompt needs a component or an icon.
How it works
- 01You askIn your editor, in plain words: “add a date picker to the booking form”.
- 02Your agent looks it upIt reads your
package.jsonfor your framework and primitives, then searches the registry and reads what it needs. - 03The server answersFrom the registry itself: the same components, docs and demos as this site, for your stack.
- 04Your agent installs itA shadcn add command for React, every file for Vue, Svelte and Solid. Then it adapts a demo.
The tools only read from shadcn.io. They never see your files: your agent reads your project and writes to it on your machine, and most editors ask you before running a command.
Start here
- QuickstartYour first component in a minute
- Frameworks and basesReact on four bases, Vue, Svelte, Solid
- PromptingWhat to ask your agent
- ToolsAll 22, with real responses
- TroubleshootingWhen it won't connect
- Security and limitsYour token and the limits
Add it to your editor
You need Pro and your MCP URL, from your dashboard. Then pick your editor: each guide has its config, with your URL already in it when you're signed in.
- Claude CodeOne terminal command
- Claude DesktopA custom connector
- ChatGPTAn app in Developer Mode
- OpenCodeA remote server in opencode.json
- OpenAI CodexCLI and IDE, one config
- AntigravityA server in mcp_config.json
- CursorA global server in settings
- KiroA workspace or user server
- Kilo CodeA streamable HTTP server
- Roo CodeA streamable HTTP server
- ClineA remote server in Cline's settings
- Augment CodeAn MCP server in Augment's settings
- WindsurfA block in Cascade's config
- VS CodeOne file in your workspace
- Visual StudioA server for Copilot in Visual Studio
- Copilot Coding AgentA repository's MCP configuration
- Copilot CLIA server in the CLI's config
- JetBrainsIntelliJ, WebStorm and more
- TraeA manual server in Trae's settings
- Gemini CLIAn HTTP server in settings.json
- Qwen CodeAn HTTP server in settings.json
- WarpAn MCP server in Warp's settings
- AmpOne terminal command
- Amazon QA server through mcp-remote
- LM StudioA server through mcp-remote
- CrushAn HTTP server in crush.json
- BoltAIA server through mcp-remote
- Rovo DevA server in Rovo Dev's MCP config
- ZencoderA custom MCP through mcp-remote
- Qodo GenA remote server in Qodo's config
- PerplexityA local connector through mcp-remote
- FactoryOne droid command
- PiOne pi command
- OpenClawOne openclaw command
- ManusA custom connector
- AnythingLLMA server in its MCP config
- HermesA server in config.yaml
- ZedAn entry in settings.json
MCP clients groups them by kind: editors, terminal agents, extensions and apps. Any other client that speaks MCP over HTTP works with the same URL; for one that only runs local servers, the same page has the mcp-remote bridge.
What it covers
| Framework | Built on | Installs with |
|---|---|---|
| React | Base UI (the default), Ark UI, Radix UI or React Aria | the shadcn CLI |
| Vue | Ark UI | file by file |
| Svelte | Ark UI | file by file |
| Solid | Ark UI | file by file |
Plus 6,181 blocks (whole sections and app screens, on the same seven targets) and 294k icons from 222 libraries, as a component for any of those frameworks (or Angular, Preact, plain SVG). Frameworks and bases explains how your agent picks the target and installs for it.
Blocks
A block is a whole section or app screen: a pricing table, a hero, a kanban board, a chat window. There are 6,181 in 56 categories, on all seven targets, and each installs like a component, with one CLI command. Four tools find them: search_blocks by what the block does, list_blocks to browse the categories, get_block for the install, source and FAQ of one for your stack, and plan_page to turn a brief into an ordered stack of them.
Your agent plans the page, then adds the stack with one install. Blocks are Pro, like the rest of the MCP.
What your agent can do
22 read-only tools, each with its own page: what it's for, its inputs, example prompts and a real response. Each answers with just what was asked: one call can bring a component's install, usage and a demo.
| Group | Tools |
|---|---|
| Discover | list_components, search_components, search_demos |
| Inspect | get_component, get_component_api, get_component_docs, get_demo, get_guide |
| Blocks | search_blocks, list_blocks, get_block, plan_page |
| Install | get_install_command, get_install_plan, get_project_setup |
| Icons | list_icon_libraries, search_icons, get_icon |
| Design | search_designs, get_design, search_templates |
| Account | whoami |
Your agent picks them itself. Prompting shows what to ask, and the calls each prompt leads to.
FAQ
What is the shadcn MCP server?
One URL your editor adds once. After that, your agent can search this registry, read a component's docs, and install it. MCP (opens in a new tab) is the protocol editors use to call tools like these.
How do I add it to my editor?
You need Pro and the URL on your dashboard. Quickstart pastes it into Claude Code, Cursor, or VS Code. Every other client has its own config.
Does it work with Vue, Svelte, and Solid?
Yes. React has four sets of primitives. Vue, Svelte, and Solid use Ark UI. Frameworks and bases is how your agent picks from package.json.
Does the server read my project files?
No. The tools only read shadcn.io. Your agent reads your project and writes to it on your machine, and most editors ask before running a command.
Do I need Pro?
Yes. The MCP is part of every Pro plan. Without it the server answers 403. Your URL works again within a few minutes of Pro starting.
What can my agent do with it?
Search, read, and install components, blocks, icons, design files, and templates. The 22 tools each have a page with a real response.