Shadcn MCP for Claude Code

One MCP URL gives Claude Code live tools to search, preview, and install every block, component, and icon on shadcn.io — no hallucinated props, no broken installs.

Install

Paste it into a terminal once you're signed in with an active Pro subscription — the URL carries your personal token, so treat it like an API key. Pro starts at $19/mo and includes MCP access across every editor plus 6,000+ production-ready blocks. Not Pro yet? See what you unlock →

Pick the right scope

For teams, use --scope project with a ${SHADCNIO_TOKEN} placeholder so nobody commits their token:

{
"mcpServers": {
  "shadcnio": {
    "type": "http",
    "url": "https://www.shadcn.io/api/mcp?token=${SHADCNIO_TOKEN}"
  }
}
}

Each teammate exports SHADCNIO_TOKEN in their shell (or a git-ignored .env.claude). Claude Code asks for approval the first time it loads a project-scoped server — a safety check against unknown .mcp.json files. A Team or Organization plan gives every workspace member their own Pro entitlement.

Install your first block

use shadcnio to install hero-announcement into my project

What Claude Code actually does, in order:

1. search_items({ query: "hero-announcement" }) to confirm the slug resolves.
2. get_item({ name: "hero-announcement" }) for a cheap metadata peek.
3. get_install_command({ name: "hero-announcement" }) — returns a shadcn add https://www.shadcn.io/r/hero-announcement.json?token=… URL with your token already in the query string.
4. Asks you to approve running that command. Approve once and it applies across the session.
5. Runs it. Files land under components/ui/.

Name the server explicitly (use shadcnio…) when multiple MCPs are active. Without it, the agent picks one at random or skips tools entirely.

The example above uses hero-announcement, a Pro block — the install runs once you're signed in with an active subscription.

Manage the connection

Inside a Claude Code session, /mcp is the one command you need — it shows live status (you want shadcnio ● connected with the full tool list) and lets you reconnect or sign out. From a shell, three more commands round out the lifecycle:

If the HTTP connection drops mid-session, Claude Code reconnects automatically — exponential backoff, up to five attempts starting at a 1s delay. The server shows as pending in /mcp while it retries; no manual intervention needed in the common case.

FAQ