70-10/shadcn-ui-mcp-server

shadcn/ui MCP Server

shadcn/ui integration for Model Context Protocol (MCP) with official registry support.

Overview

This MCP server provides tools for generating and managing shadcn/ui components. It can be called from clients like Claude Code to create and customize React components.

🌐 Official Registry Only: Dynamically fetches the latest 47+ components from the official shadcn/ui registry API, ensuring you always have the most up-to-date components.

Features

Available Tools

1. create_component - Generate shadcn/ui components (from official registry)
2. list_available_components - Get list of available components (from official registry)
3. get_component_usage - Get component usage examples (from official registry)
4. customize_component - Customize existing components
5. init_project - Initialize shadcn/ui in new projects

Supported Components

🌐 Official Registry (47+ components)

• Basic UI: button, input, label, textarea, checkbox, radio-group
• Layout: card, dialog, sheet, tabs, accordion, separator
• Navigation: dropdown-menu, menubar, navigation-menu, breadcrumb
• Data Display: table, badge, avatar, calendar, chart, progress
• Forms: form, select, combobox, date-picker, slider
• Feedback: alert, toast, skeleton, spinner, alert-dialog
• Other: tooltip, popover, context-menu, command, scroll-area

Installation

You can use this MCP server directly from GitHub without installation:

npx github:70-10/shadcn-ui-mcp-server

Usage

MCP Client Configuration

Add the following to Claude Desktop's configuration file claude_desktop_config.json:

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["github:70-10/shadcn-ui-mcp-server"]
    }
  }
}

Alternative configurations:

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": ["github:70-10/shadcn-ui-mcp-server#v1.0.0"]
    }
  }
}

Configuration file locations:

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

Development

For local development:

git clone https://github.com/70-10/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server
npm install
npm run build
npm run dev  # TypeScript watch mode
npm test  # Run tests with vitest
npm test -- --run  # Run tests once without watch mode

Tool Usage Examples

Create Components from Official Registry

// Get the latest Button component from official registry
await tools.create_component({
  name: "CustomButton", 
  type: "button",  // Choose from 47+ official components
  path: "./components/ui"
});

// Advanced components are also available
await tools.create_component({
  name: "DataTable", 
  type: "table",
  path: "./components/ui"
});

Check Available Components

// Display component list from official registry
await tools.list_available_components();
// Result: 47+ components will be displayed

Get Component Usage Examples

// Detailed usage examples for official components
await tools.get_component_usage("calendar");
// TypeScript code, dependencies, and usage examples will be displayed

Customize Components

await tools.customize_component({
  componentName: "button",
  customizations: {
    styles: "rounded-full shadow-lg",
    variants: ["large", "small"]
  }
});

Technical Features

🌐 Official Registry Only

• API: Fetches latest component list from https://ui.shadcn.com/r/index.json
• Caching: Speeds up with in-memory caching of fetched components
• Strict Error Handling: Displays clear error messages when registry API fails

🏗️ Registry-Only Architecture

• Single Source: Fetches components only from official registry
• No Fallback: Prioritizes system reliability and consistency
• Latest State Guarantee: Always provides the latest official components

License

MIT