Shadcn MCP for Crush

Connect Crush into the shadcn.io registry with one MCP URL — access every block, icon, and example in the catalog.

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

Install

Open crush.json at the root of your project (or ~/.config/crush/crush.json for user-scope) and add the shadcnio server:

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

Crush uses a top-level mcp object (not mcpServers like Cursor). The $schema line is optional but worth keeping — it unlocks autocomplete and validation in any editor that reads JSON schemas. "type": "http" is required for remote servers.

Share with your team

Commit crush.json at the repo root with a shell-expanded token reference so nobody commits their secret:

{
"$schema": "https://charm.land/crush.json",
"mcp": {
  "shadcnio": {
    "type": "http",
    "url": "https://www.shadcn.io/api/mcp",
    "headers": {
      "Authorization": "Bearer ${SHADCNIO_TOKEN}"
    }
  }
}
}

Each teammate exports SHADCNIO_TOKEN in their shell (or a git-ignored .env). 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 Crush 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 through Crush's shell tool. Files land under components/ui/.

Name the server explicitly ("use shadcnio…") when multiple MCPs are configured.

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

Manage the connection

Crush re-reads crush.json on each launch — relaunch the TUI after editing the config. Check the status bar for MCP connection indicators and the /mcp command (if available in your Crush build) for a live server list.

If your Pro subscription lapses, the next tool call returns 403. Resubscribing restores access immediately — the token stays valid across subscription gaps.

FAQ

Was this page helpful?

Sign in to leave feedback.