Shadcn UI v4 MCP Server

Returns shadcn/ui v4 component source, demos, blocks, and metadata for React, Svelte, Vue, or React Native.

Community integration. Published by Jpisnice, not by the shadcn/ui team.

Before you start

It reads components from GitHub, which allows 60 requests an hour without a token. A GitHub token with no scopes, set as GITHUB_PERSONAL_ACCESS_TOKEN, raises that to 5,000.
Add --framework svelte, vue, or react-native to switch frameworks, or --ui-library base for Base UI.

MCP server setup

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

Add to .mcp.json. Start Claude Code in the project and approve the shadcn-ui server when asked.

Agent setup prompt

Paste this into a coding agent to set Shadcn UI v4 MCP Server up in the client you use.

Set up Shadcn UI v4 MCP Server (https://github.com/Jpisnice/shadcn-ui-mcp-server) for the AI client I use with this project.

MCP server "shadcn-ui":
- Runs locally over stdio: npx @jpisnice/shadcn-ui-mcp-server
- Needs no sign-in or API key.
- Config file per client: Claude Code: .mcp.json; Cursor: .cursor/mcp.json; VS Code: .vscode/mcp.json.

Before you start:
- It reads components from GitHub, which allows 60 requests an hour without a token. A GitHub token with no scopes, set as GITHUB_PERSONAL_ACCESS_TOKEN, raises that to 5,000.
- Add --framework svelte, vue, or react-native to switch frameworks, or --ui-library base for Base UI.

Steps:
1. Ask which client I use if you can't tell.
2. For Claude Code, Cursor, or VS Code, add the "shadcn-ui" server to that client's config file, using its documented format. Keep every server and setting already in the file.
3. Reload the client, finish any sign-in, and confirm the server's tools are listed.

Never write a secret value into a config file or ask me to paste one into this chat. If anything here differs from the provider's guide, follow the guide.