Shadcn UI v4 MCP Server for Claude Code: Setup & Config

What you can do with Shadcn UI v4 in Claude Code

Match retrieved UI implementations to the framework and React primitives your project actually uses.

• Resolve a component's dependencies and usage pattern before generating integration code.
• Inspect a TweakCN preset before asking the supplied theme operation to apply it.

Before you start: Shadcn UI v4 in Claude Code

• Node.js version 18 or above in the source-build prerequisites
• npm tooling for npx; npm or pnpm for source builds
• Client with MCP support

The basic npx command appears directly in the README. The GitHub environment entry is optional and documented separately. Initial defaults are React with Radix and stdio. Use --framework for another implementation; React can select Base UI with --ui-library base. Network examples use SSE or dual mode.

Shadcn UI v4 Claude Code configuration

1. Choose Claude Code configuration scope

   For Shadcn UI v4 MCP Server, open Project scope: .mcp.json at the repository root. Project JSON: merge into mcpServers; user scope: use the CLI.

2. Add Shadcn UI v4 MCP Server to Claude Code

   Use the shadcn-ui-mcp-unofficial entry below in mcpServers. Keep Shadcn UI v4 MCP Server's documented stdio connection fields and your other Claude Code entries.

3. Check Shadcn UI v4 MCP Server in Claude Code

   Shadcn UI v4 MCP Server: Inspect claude mcp list and /mcp status.

{
  "mcpServers": {
    "shadcn-ui-mcp-unofficial": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<optional GitHub credential for a higher request allowance>"
      }
    }
  }
}

claude mcp add-json --scope project 'shadcn-ui-mcp-unofficial' '{"type":"stdio","command":"npx","args":["@jpisnice/shadcn-ui-mcp-server"],"env":{"GITHUB_PERSONAL_ACCESS_TOKEN":"<optional GitHub credential for a higher request allowance>"}}'

Shadcn UI v4 tools available to Claude Code

Shadcn UI v4's stored tool list documents 10 tools; compare it with Claude Code's connected tool list, because the stored list is not a live check.

list_blocks

For Shadcn UI v4's list_blocks, review the permission request and arguments in Claude Code before approval.

Browse the block inventory by category.

get_block

For Shadcn UI v4's get_block, review the permission request and arguments in Claude Code before approval.

Fetch the implementation of a chosen UI block.

list_components

For Shadcn UI v4's list_components, review the permission request and arguments in Claude Code before approval.

Browse the available component inventory.

get_component_metadata

For Shadcn UI v4's get_component_metadata, review the permission request and arguments in Claude Code before approval.

get_component_demo

For Shadcn UI v4's get_component_demo, review the permission request and arguments in Claude Code before approval.

get_component

For Shadcn UI v4's get_component, review the permission request and arguments in Claude Code before approval.

get_directory_structure

For Shadcn UI v4's get_directory_structure, review the permission request and arguments in Claude Code before approval.

list_themes

For Shadcn UI v4's list_themes, review the permission request and arguments in Claude Code before approval.

Browse the available TweakCN preset choices.

get_theme

For Shadcn UI v4's get_theme, review the permission request and arguments in Claude Code before approval.

Inspect the details behind one TweakCN preset.

apply_theme

For Shadcn UI v4's apply_theme, review the permission request and arguments in Claude Code before approval.

Shadcn UI v4: full stored tool descriptions

Troubleshooting Shadcn UI v4 in Claude Code

• If Shadcn UI v4 MCP Server fails to start, check npx @jpisnice/shadcn-ui-mcp-server (Node.js/npm), the working directory, and Claude Code's selected scope; inspect claude mcp list and /mcp.
• Shadcn UI v4 MCP Server: check GITHUB_PERSONAL_ACCESS_TOKEN; keep credentials out of shared .mcp.json.
• Shadcn UI v4 MCP Server uses stdio here: Claude Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: Omitting a GitHub token leaves the lower documented request allowance.
• Known limitation: Base UI is not an alternative for the non-React framework modes.
• General Claude Code troubleshooting lives in the /clients/claude-code guide.

Frequently asked questions