Shadcn MCP for Roo Code

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

Install

Open the Roo Code pane, click the MCP servers icon in the top nav, scroll to the bottom and select Edit Project MCP — or create .roo/mcp.json at the root of your project directly — and add the shadcnio server:

Paste it in once you're signed in with an active Pro subscription — the config carries your personal token, so treat the full URL 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 →

"type": "streamable-http" is required for URL-based configs — Roo Code won't infer the transport from the url alone, so omitting this field results in an immediate error.

Pick the right scope

If both define shadcnio, the project file wins. For teams, commit .roo/mcp.json referencing a system env var so nobody commits their token:

{
"mcpServers": {
  "shadcnio": {
    "type": "streamable-http",
    "url": "https://www.shadcn.io/api/mcp",
    "headers": {
      "Authorization": "Bearer ${env:SHADCNIO_TOKEN}"
    },
    "alwaysAllow": [],
    "disabled": false
  }
}
}

Each teammate exports SHADCNIO_TOKEN in their shell (or a git-ignored .env). Roo Code substitutes ${env:VAR} at config-load time. 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 Roo 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. Runs it. Files land under components/ui/.

Name the server explicitly (use shadcnio…) when multiple MCPs are active. Without it, Roo Code picks one at random or skips tools entirely. To skip per-call approval prompts for read-only tools, list them in alwaysAllow (e.g. ["search_items", "get_item"]) — and leave install/write actions off that list so you always see what's being added to your project.

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 the MCP servers panel from the Roo Code pane to see every configured server. Each entry gets its own controls — a restart button, a delete button, and a toggle switch to enable/disable without removing the config. The Network Timeout dropdown at the bottom of each server's box lets you override the default 60s response budget (1–3600s range).

Two global toggles at the top of the panel are worth knowing about:

• Enable MCP Servers — off by default removes all MCP context from the system prompt, saving tokens but disconnecting every server.
• Enable MCP Server Creation — controls whether Roo can build new MCP servers from scratch when you ask it to. Not required for using shadcnio, only for letting Roo generate new servers.

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