1. Home
  2. Shadcn UI v4 MCP Server
  3. Shadcn UI v4 MCP Server for Claude Desktop: Setup & Config

Data as of

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

Claude Desktop: This MCP server gives coding assistants shadcn-related implementation material, from individual components to larger UI blocks.

What you can do with Shadcn UI v4 in Claude Desktop

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.
  • Retrieve a larger UI block instead of assembling every screen element from isolated snippets.

Before you start: Shadcn UI v4 in Claude Desktop

  • 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 Desktop configuration

  1. Choose Claude Desktop configuration scope

    For Shadcn UI v4 MCP Server, open macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json. Merge under mcpServers via Settings → Developer → Edit Config when available.

  2. Add Shadcn UI v4 MCP Server to Claude Desktop

    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 Desktop entries.

  3. Check Shadcn UI v4 MCP Server in Claude Desktop

    Shadcn UI v4 MCP Server: Fully quit and reopen Claude Desktop; check developer diagnostics.

Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

JSON
{
  "mcpServers": {
    "shadcn-ui-mcp-unofficial": {
      "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 Desktop

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

list_blocks

When Claude Desktop requests list_blocks from Shadcn UI v4, review the action before approving it.

Browse the block inventory by category.

get_block

When Claude Desktop requests get_block from Shadcn UI v4, review the action before approving it.

Fetch the implementation of a chosen UI block.

list_components

When Claude Desktop requests list_components from Shadcn UI v4, review the action before approving it.

Browse the available component inventory.

get_component_metadata

When Claude Desktop requests get_component_metadata from Shadcn UI v4, review the action before approving it.

Look up a component's descriptive, dependency, and configuration information.

get_component_demo

When Claude Desktop requests get_component_demo from Shadcn UI v4, review the action before approving it.

Fetch usage-example code for the selected component.

get_component

When Claude Desktop requests get_component from Shadcn UI v4, review the action before approving it.

get_directory_structure

When Claude Desktop requests get_directory_structure from Shadcn UI v4, review the action before approving it.

list_themes

When Claude Desktop requests list_themes from Shadcn UI v4, review the action before approving it.

get_theme

When Claude Desktop requests get_theme from Shadcn UI v4, review the action before approving it.

apply_theme

When Claude Desktop requests apply_theme from Shadcn UI v4, review the action before approving it.

Shadcn UI v4: full stored tool descriptions

Troubleshooting Shadcn UI v4 in Claude Desktop

  • Fully quit and reopen Claude Desktop for Shadcn UI v4 MCP Server. If npx @jpisnice/shadcn-ui-mcp-server (Node.js/npm) is missing, check the desktop process's PATH, which may differ from your terminal.
  • In Claude Desktop's Shadcn UI v4 MCP Server entry, check GITHUB_PERSONAL_ACCESS_TOKEN. Keep secrets out of shared screenshots and repositories.
  • Shadcn UI v4 MCP Server uses stdio here: Claude Desktop 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 Desktop troubleshooting lives in the /clients/claude-desktop guide.

Shadcn UI v4 MCP Server — details. Claude Desktop guide

Frequently asked questions

Claude Desktop loads Shadcn UI v4 MCP Server from claude_desktop_config.json: ~/Library/Application Support/Claude/ on macOS, or %APPDATA%\Claude\ on Windows. Open it via Settings → Developer → Edit Config when available.

Claude Desktop's shadcn-ui-mcp-unofficial example uses stdio.

Shadcn UI v4 MCP Server's Claude Desktop configuration invokes npx @jpisnice/shadcn-ui-mcp-server (Node.js/npm).

Claude Desktop's Shadcn UI v4 MCP Server example references GITHUB_PERSONAL_ACCESS_TOKEN. Check these names if startup or authentication fails; the example alone does not distinguish required from optional values.

Shadcn UI v4 MCP Server's stored list contains 10 tools, including list_blocks, get_block, list_components. Compare those names with Claude Desktop's connected tool list; the stored list is not a live check.

The README provides a --framework option and identifies React as the default. It documents Svelte, React Native, and Vue choices as alternatives.

Yes. Select base using --ui-library or UI_LIBRARY. Radix is the default, and this choice applies only in React mode.