shadcn.io is not affiliated with official 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 18, 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 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.
What your agent can do
18 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 |
| 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, icons, design files, and templates. The 18 tools each have a page with a real response.