Shadcn MCP for Claude Desktop

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

Install

In Claude Desktop, open Settings → Connectors → Add Custom Connector. Enter shadcnio as the name and paste the URL below as the remote MCP server URL:

Paste it in 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 →

Claude Desktop's Connectors feature handles the HTTP transport natively — no bridge process, no restart. New conversations pick up the server automatically.

Prefer JSON config?

If your build of Claude Desktop doesn't have Connectors, or you want shadcnio committed to your claude_desktop_config.json alongside other servers, use the mcp-remote STDIO bridge:

{
"mcpServers": {
  "shadcnio": {
    "command": "npx",
    "args": ["-y", "mcp-remote", "https://www.shadcn.io/api/mcp?token=YOUR_TOKEN"]
  }
}
}

Open Settings → Developer → Edit Config to find this file (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json). Replace YOUR_TOKEN with the token from /dashboard/account → MCP Server card. Claude Desktop needs a full restart after editing this file — a config change isn't picked up until the app relaunches.

Install your first block

use shadcnio to install hero-announcement into my project

What Claude Desktop 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. Hands you the command to run in your terminal.

Claude Desktop doesn't run shell commands itself — it returns the shadcn add line for you to paste into a terminal inside your project. Name the server explicitly (use shadcnio…) when multiple connectors are active, or Claude picks one at random.

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

Manage the connection

Open Settings → Connectors to see every connector you've added. Each row has a toggle to disable without removing, a trash icon to delete, and a link to the server's tool list. You can also use the MCP indicator in the bottom-right of the chat input to check live status at a glance.

For the JSON-config path, set "disabled": true on the shadcnio entry in claude_desktop_config.json and restart to turn it off without removing the config.

If your Pro subscription lapses, the next tool call returns 403. Resubscribing restores access on the following request — no reconfigure, no reinstall. The token itself stays valid across subscription gaps.

FAQ