shadcn/ui MCP Server — Install & Live Demo

Why use it

Key features

Real-time fetch of component source from shadcn/ui registry
Multi-framework: React, Vue, Svelte 5, React Native
Component dependency graph (e.g. Dialog needs Portal)
Install command per package manager (npm/pnpm/yarn/bun)
Examples + demo source, not just the bare component
Block templates (auth pages, dashboards) included

Live Demo

What it looks like in practice

shadcn-ui-mcp.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "shadcn-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use shadcn/ui MCP Server

Scaffold a shadcn/ui Form without API drift

👤 Frontend devs building React/Next apps ⏱ ~20 min intermediate

When to use: You want a Form + react-hook-form + Zod, but Claude keeps using outdated shadcn imports.

Prerequisites

Next.js / Vite app with shadcn/ui initialized — npx shadcn@latest init

Flow

Get current Form source

shadcn-ui MCP: get the current source for form (React) plus its dependencies. Show me the install command.✓ Copied

→ Latest source returned; deps list includes react-hook-form, zod
Build my form

Now build a SignupForm using these exact APIs. Email + password + terms checkbox; Zod schema with validation messages. No invented imports.✓ Copied

→ Component compiles against current shadcn version
Verify

Run tsc --noEmit and report any unresolved imports.✓ Copied

→ Clean TS check

Outcome: A working Form against the current shadcn/ui API — no import { ... } from '@/components/ui/old-name' mistakes.

Pitfalls

Project is on an older shadcn version — Pin via --registry or accept the upgrade and run shadcn upgrade

Combine with: filesystem

Drop in a shadcn block (auth/dashboard)

👤 Devs needing pre-baked layouts ⏱ ~15 min beginner

When to use: You need a complete login page or dashboard layout, not just a component.

Flow

Browse blocks

shadcn-ui: list available blocks. I want a sidebar dashboard layout.✓ Copied

→ Block list with names + previews
Pull and adapt

Pull the source for sidebar-07. Adapt it to my routes — replace the demo links with /dashboard, /clients, /settings.✓ Copied

→ Block code returned; my paths swapped in

Outcome: Full dashboard layout running, customized to my app, in under 10 min.

Pitfalls

Block depends on components you don't have installed — MCP returns the dep list; install missing first

Combine with: filesystem

Port a React app's shadcn usage to Svelte

👤 Devs migrating frameworks ⏱ ~30 min advanced

When to use: You're moving from Next to SvelteKit and want shadcn-svelte equivalents.

Flow

Map components

List the components my app imports from @/components/ui. For each, get the Svelte 5 equivalent from shadcn-ui MCP.✓ Copied

→ Component-by-component mapping with notes on API differences
Translate one example

Translate this React Form usage to the Svelte version using the actual current API.✓ Copied

→ Idiomatic Svelte 5 code

Outcome: Migration plan + reference translation for the team to follow.

Pitfalls

Some components don't exist in Svelte port yet — MCP will say 'not found'; flag those for manual port

Combinations

Pair with other MCPs for X10 leverage

shadcn-ui-mcp + filesystem

Generate components straight into your repo

shadcn: get Form. Filesystem: write the code into src/components/SignupForm.tsx with my schema.✓ Copied

shadcn-ui-mcp + github

PR a UI refactor that uses current shadcn API

Pull the current Dialog API. Refactor src/components/Modal.tsx to match. Open a PR.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
list_components	framework?: react\|vue\|svelte\|react-native	Discovery	1 fetch
get_component	name: str, framework?: str	Before writing code	1 fetch
get_component_demo	name: str, framework?: str	See real usage	1 fetch
list_blocks	framework?: str	Find pre-baked layouts	1 fetch
get_block	name: str	Drop in a layout	1 fetch

Cost & Limits

What this costs to run

API quota: GitHub raw fetches (60/h unauthenticated, 5000/h authed)
Tokens per call: 300–4000 (component source can be large)
Monetary: Free OSS
Tip: Pass GITHUB_PERSONAL_ACCESS_TOKEN to avoid the 60/h limit

Security

Permissions, secrets, blast radius

Credential storage: Optional GitHub token to raise rate limit

Data egress: github.com (raw and api)

Never grant: repo:write

MCP fetches public code only — does not write to your repo unless paired with filesystem

Troubleshooting

Common errors and fixes

Rate limit exceeded

Set GITHUB_PERSONAL_ACCESS_TOKEN env var

Component not found in framework

Vue/Svelte ports lag React; check list_components for that framework

Returned source uses different API than my project

Project is on older shadcn; either upgrade or pin to old registry version

Alternatives

shadcn/ui MCP Server vs others

Alternative	When to use it instead	Tradeoff
Magic MCP (21st Dev)	You want broader UI generation, not just shadcn	More opinionated; heavier
Component MCP (custom registry)	You have an internal design system	Build it yourself

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills