Shadcn UI

The Shadcn UI MCP Server allows your AI assistants access to the popular shadcn/ui component library.

It can pull the latest TypeScript source for components, find implementation demos, and even retrieve entire pre-built “Blocks” like dashboards or login forms.

Features

• 📦 Component Source: Get direct access to the latest shadcn/ui v4 component source code.
• 🎬 Implementation Demos: Pull up example code and usage patterns for any component.
• 🧱 Block Implementations: Retrieve complete, multi-component blocks like calendars and dashboards.
• ℹ️ Component Metadata: Access component dependencies, descriptions, and other details.
• 🔄 Framework Switching: Instantly toggle between React (shadcn/ui) and Svelte (shadcn-svelte) component libraries.
• 🔑 GitHub API Integration: Uses smart caching and handles GitHub API rate limits, especially when you provide a token.

How To Use It

1. Run the server with npx:

npx @jpisnice/shadcn-ui-mcp-server

This command has a rate limit of 60 GitHub API requests per hour. For any serious work, you should use a GitHub personal access token to increase the limit to 5,000 requests per hour.

npx @jpisnice/shadcn-ui-mcp-server --github-api-key <your_github_token>

You can get a token from your GitHub Developer settings. No special permissions or scopes are needed.

2. The MCP server defaults to React’s shadcn/ui. To switch to the Svelte version, use the --framework (or -f) flag:

# Serve Svelte components
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

3. Connect the MCP server to your MCP clients. Here is an example for VS Code’s settings.json using the Claude extension:

{
  "claude.mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<your_github_token>"
      }
    },
    // Svelte configuration
    "shadcn-ui-svelte": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "svelte"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<your_github_token>"
      }
    }
  }
}

4. Command Line Options

• --version, -v: Shows the current version of the server package.
• --github-api-key, -g <token>: Specifies your GitHub Personal Access Token to increase the API request limit.
• --framework, -f <framework>: Switches the component library. Accepts ‘react’ (the default) or ‘svelte’.
• --help, -h: Displays the help message with all available options.

FAQs

Q: Does this server install the components into my project?
A: No. The server’s job is to fetch the component code and information for your AI assistant to use. You are still responsible for installing and configuring shadcn/ui in your project.

Q: How can I see which components or blocks are available?
A: Your AI assistant can use the tools provided by the server, such as list_components and list_blocks, to get a complete list of what’s available.

Q: The server isn’t working in my editor. What should I check?
A: First, confirm the server runs by itself in your terminal by executing npx @jpisnice/shadcn-ui-mcp-server --help. Next, carefully review your editor’s JSON configuration file for any typos in the command or arguments. Finally, ensure your GitHub token is correct and hasn’t expired.