MCP server

shadcn/ui MCP Server

Browse, search and install components from shadcn/ui and other registries, built into the shadcn CLI. Official: built and maintained by shadcn. It runs locally on your machine over stdio. Setup below for 12 clients (checked 2026-10-25). Repo and registry data checked 2026-10-24.

Maintainer: Official · shadcn
Runs: Local (stdio)
Repo: shadcn-ui/ui
GitHub: ★ 126,444, last push 2026-10-24 (checked 2026-10-24)
License: MIT
Docs: ui.shadcn.com
Connects to: shadcn/ui
DevHunt: shadcn on DevHunt

Install the shadcn/ui MCP Server

Pick your client. Each tab starts the same local command. Config shapes checked against each client's docs on 2026-10-25.

Run in a terminal. Everything after -- is the command that starts the server. docs

claude mcp add --transport stdio shadcn-ui -- npx shadcn@latest mcp

Claude Desktop only: Settings > Developer > Edit Config opens claude_desktop_config.json. Add this, save and restart the app. docs

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project), or use the install button. docs

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Add to Cursor

Add to .vscode/mcp.json (note the "servers" key and the type), or use the install button. Command Palette > "MCP: Open User Configuration" for all workspaces. docs

{
  "servers": {
    "shadcn-ui": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Add to VS Code

Run codex mcp add shadcn-ui -- npx shadcn@latest mcp, or add this to ~/.codex/config.toml. docs

[mcp_servers.shadcn-ui]
command = "npx"
args = ["shadcn@latest", "mcp"]

Run in a terminal (-s user adds it for all projects; the default is this project). docs

gemini mcp add -s user shadcn-ui npx shadcn@latest mcp

Run in a terminal; it writes ~/.copilot/mcp-config.json. docs

copilot mcp add shadcn-ui -- npx shadcn@latest mcp

Add to mcp_config.json: ~/.config/devin/mcp_config.json on macOS and Linux (older installs: ~/.codeium/windsurf/mcp_config.json), %APPDATA%\devin\ on Windows. docs

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Add to Zed's settings.json (or Settings > AI > MCP Servers > Add Server). Remote servers without an Authorization header sign in with OAuth. docs

{
  "context_servers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Add to opencode.json in the project (or ~/.config/opencode/opencode.json). docs

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "shadcn-ui": {
      "type": "local",
      "command": [
        "npx",
        "shadcn@latest",
        "mcp"
      ],
      "enabled": true
    }
  }
}

Add to ~/.kiro/settings/mcp.json (all projects) or .kiro/settings/mcp.json (this project). docs

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

MCP Servers > Configure > Configure MCP Servers opens cline_mcp_settings.json; add this entry. docs

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Security notes

The local server runs with your user's permissions (the command starts it on your machine). The package is pinned to @latest, so each start can pull a new version; pin a version if you want to review updates.

Alternatives

all design & frontend MCP servers →

Magic (21st.dev)official · ★ 6.2k
Generate React UI components from a prompt, inspired by 21st.dev's library.
draw.ioofficial · ★ 5.7k
Create draw.io diagrams from Mermaid or XML, shown live in the chat.
Excalidrawofficial · ★ 5.6k
Draw hand-drawn style Excalidraw diagrams that render live in the chat.
AntV Chartofficial · ★ 4.4k
Generate charts (line, bar, maps, flow diagrams and 20+ more) with AntV.
Miroofficial · ★ 163
Hosted server to read Miro boards and create diagrams, docs and tables on them.
Webflowofficial · ★ 140
Pages, CMS collections and site settings in Webflow, with a Designer companion app.
Wixofficial · ★ 15
Hosted server to build and manage Wix sites, stores, bookings and CMS data.
Canvaofficial
Search, create and export Canva designs from an AI assistant (hosted server).

FAQ

What does the shadcn/ui MCP Server do?+

Browse, search and install components from shadcn/ui and other registries, built into the shadcn CLI.

Is the shadcn/ui MCP server official?+

Official: built and maintained by shadcn.

How do I add shadcn/ui to Claude Code?+

Run: claude mcp add shadcn-ui -- npx shadcn@latest mcp. Add --scope project to share it with your team through .mcp.json.

How do I use the shadcn/ui MCP server in Cursor or VS Code?+

Open the Cursor or VS Code tab above: it has the mcp.json entry and a one-click install link. Cursor uses the "mcpServers" key; VS Code uses "servers" and needs a type ("stdio").

Does shadcn/ui work in ChatGPT and claude.ai?+

No: it runs locally over stdio, and ChatGPT and claude.ai only connect to remote servers. Use it in Claude Desktop, Claude Code, Cursor, VS Code or another client that can start a local process.

What are the alternatives to the shadcn/ui MCP server?+

Other design & frontend MCP servers: Magic (21st.dev), draw.io, Excalidraw, AntV Chart and Miro.

All MCP servers · What is an MCP server? · Agent skills