Shadcn UI MCP Server

by Jpisnice

2.8k stars

965 downloads

Not rated

GitHub

Other
AI

About

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

Details

Author: Jpisnice
GitHub stars: 2,832
Downloads: 965
Categories: Other, AI

- Multi‑framework support (React, Svelte, Vue, React Native)
- Latest shadcn/ui v4 TypeScript source code
- Component demos with usage patterns
- Complete block implementations (dashboards, calendars, forms)
- Metadata access (dependencies, descriptions, configuration)
- SSE transport and Docker Compose for production deployments

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Shadcn UI MCP Server

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Run the server with npx @jpisnice/shadcn-ui-mcp-server (optionally with --github-api-key for higher rate limits). Switch frameworks via --framework svelte (or vue, react-native). Use --mode sse for HTTP-based multi-client support. Integrate with Claude Desktop via a one-click .mcpb file or with Claude Code using claude mcp add. Configuration uses environment variables like GITHUB_PERSONAL_ACCESS_TOKEN and UI_LIBRARY.

`get_component`

Get the source code for a specific shadcn/ui v4 component

`get_component_demo`

Get demo code illustrating how a shadcn/ui v4 component should be used

`list_components`

Get all available shadcn/ui v4 components

`get_component_metadata`

Get metadata for a specific shadcn/ui v4 component

`get_directory_structure`

Get the directory structure of the shadcn-ui v4 repository

`get_block`

Get source code for a specific shadcn/ui v4 block (e.g., calendar-01, dashboard-01)

`list_blocks`

Get all available shadcn/ui v4 blocks with categorization

`apply_theme`

Apply a TweakCN theme preset to the project

`list_themes`

List available tweakcn themes

`get_theme`

Get details of a specific tweakcn theme

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

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

Shadcn UI v4 MCP Server

> 🚀 The fastest way to integrate shadcn/ui components into your AI workflow

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.

✨ Key Features

- 🎯 Multi-Framework Support - React, Svelte, Vue, and React Native implementations
- 📦 Component Source Code - Latest shadcn/ui v4 TypeScript source
- 🎨 Component Demos - Example implementations and usage patterns
- 🏗️ Blocks Support - Complete block implementations (dashboards, calendars, forms)
- 📋 Metadata Access - Dependencies, descriptions, and configuration details
- 🔍 Directory Browsing - Explore repository structures
- ⚡ Smart Caching - Efficient GitHub API integration with rate limit handling
- 🌐 SSE Transport - Server-Sent Events support for multi-client deployments
- 🐳 Docker Ready - Production-ready containerization with Docker Compose

🚀 Quick Start

# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server
With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md

📦 One-Click Installation (Claude Desktop)

Download and double-click the .mcpb file for instant installation:

1. Download shadcn-ui-mcp-server.mcpb from Releases
2. Double-click the file - Claude Desktop opens automatically
3. Enter your GitHub token (optional, for higher rate limits)
4. Click Install - tools are available immediately

Manual install: Claude Desktop → Settings → MCP → Add Server → Browse → Select .mcpb file

> References: Anthropic Desktop Extensions | Building MCPB

🌐 SSE Transport & Docker Deployment

Run the server with Server-Sent Events (SSE) transport for multi-client support and production deployments:

Quick Start with SSE

# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423
Docker Compose (production ready)
docker-compose up -d
Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

Transport Modes

- stdio (default) - Standard input/output for CLI usage - sse - Server-Sent Events for HTTP-based connections - dual - Both stdio and SSE simultaneously

Docker Examples

# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server
With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server
Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health

Environment Variables

- MCP_TRANSPORT_MODE - Transport mode (stdio|sse|dual) - MCP_PORT - SSE server port (default: 7423 - SHADCN on keypad!) - MCP_HOST - Host binding (default: 0.0.0.0) - MCP_CORS_ORIGINS - CORS origins (comma-separated) - GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API token - UI_LIBRARY - UI primitive library: radix (default) or base (React only)

📚 Documentation

| Section | Description |
|---------|-------------|
| 🚀 Getting Started | Installation, setup, and first steps |
| ⚙️ Configuration | Framework selection, tokens, and options |
| 🔌 Integration | Editor and tool integrations |
| 📖 Usage | Examples, tutorials, and use cases |
| 🎨 Frameworks | Framework-specific documentation |
| 🐛 Troubleshooting | Common issues and solutions |
| 🔧 API Reference | Tool reference and technical details |

🎨 Framework Support

This MCP server supports four popular shadcn implementations:

| Framework | Repository | Maintainer | Description |
|-----------|------------|------------|-------------|
| React (default) | shadcn/ui | shadcn | React components from shadcn/ui v4 |
| Svelte | shadcn-svelte | huntabyte | Svelte components from shadcn-svelte |
| Vue | shadcn-vue | unovue | Vue components from shadcn-vue |
| React Native | react-native-reusables | Founded Labs | React Native components from react-native-reusables |

UI Library (React only)

shadcn/ui v4 supports two primitive libraries for React: Radix UI (default) and Base UI.

# Radix UI (default)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix
Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base
Or via environment variable
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server

Claude Desktop config example:

{

  "args": ["--framework", "react", "--ui-library", "base"]

}

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

# Visit: https://github.com/settings/tokens
Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

2. Run Server

# React (default)
npx @jpisnice/shadcn-ui-mcp-server
Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
Vue  
npx @jpisnice/shadcn-ui-mcp-server --framework vue
React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

3. Integrate with Your Editor

- Claude Code: See Claude Code Integration below - VS Code: docs/integration/vscode.md - Cursor: docs/integration/cursor.md - Claude Desktop: docs/integration/claude-desktop.md - Continue.dev: docs/integration/continue.md

💻 Claude Code Integration

Quick Add (CLI)

# Add the shadcn-ui MCP server
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

SSE Transport

For production deployments with SSE transport:

# Start server in SSE mode
node build/index.js --mode sse --port 7423
Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

Framework-Specific Commands

See Claude Code Integration Guide for framework-specific commands (React, Svelte, Vue, React Native).

> Reference: Claude Code MCP Documentation

🎯 Use Cases

- AI-Powered Development - Let AI assistants build UIs with shadcn/ui
- Multi-Client Deployments - SSE transport supports multiple concurrent connections
- Production Environments - Docker Compose ready with health checks and monitoring
- Component Discovery - Explore available components and their usage
- Multi-Framework Learning - Compare React, Svelte, Vue, and React Native implementations
- Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
- Code Generation - Generate component code with proper dependencies

📦 Installation

# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server
Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server

🔨 Building from Source

Prerequisites

- Node.js >= 18.0.0
- npm or pnpm

Build Steps

# Clone the repository
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server
Install dependencies
npm install
Build the project
npm run build
Run the server
node build/index.js --github-api-key YOUR_TOKEN

Run Locally

# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte

Building MCPB Package

The project includes a manifest.json following the MCPB specification. The .mcpb file is a ZIP archive containing the server, dependencies, and configuration.

See CONTRIBUTING.md for detailed packaging instructions.

> Reference: Building Desktop Extensions with MCPB

🔗 Quick Links

- 📖 Full Documentation
- 🚀 Getting Started Guide
- 🌐 SSE Transport & Docker Guide
- 🎨 Framework Comparison
- 🔧 API Reference
- 🐛 Troubleshooting
- 💬 Issues & Discussions

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

- shadcn - For the amazing React UI component library
- huntabyte - For the excellent Svelte implementation
- unovue - For the comprehensive Vue implementation
- Founded Labs - For the React Native implementation
- Anthropic - For the Model Context Protocol specification

---

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

get_component

get_component_demo

list_components

get_component_metadata

get_directory_structure

get_block

list_blocks

apply_theme

list_themes

get_theme

Claude Desktop / Cursor

McpServers

Shadcn UI v4 MCP Server

✨ Key Features

🚀 Quick Start

With GitHub token (5000 requests/hour) - Recommended

Switch frameworks

Use Base UI instead of Radix (React only)

📦 One-Click Installation (Claude Desktop)

🌐 SSE Transport & Docker Deployment

Quick Start with SSE

Docker Compose (production ready)

Connect with Claude Code

Transport Modes

Docker Examples

With GitHub API token

Docker Compose (recommended)

Environment Variables

📚 Documentation

🎨 Framework Support

UI Library (React only)

Base UI

Or via environment variable

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

Generate token with no scopes needed

2. Run Server

Svelte

Vue

React Native

3. Integrate with Your Editor

💻 Claude Code Integration

Quick Add (CLI)

SSE Transport

Connect with Claude Code

Framework-Specific Commands

🎯 Use Cases

📦 Installation

Or use npx (recommended)

🔨 Building from Source

Prerequisites

Build Steps

Install dependencies

Build the project

Run the server

Run Locally

Building MCPB Package

🔗 Quick Links

📄 License

🙏 Acknowledgments

Install

More like this

Sequential Thinking

Filesystem

EverArt

Google Drive

Context 7

Reactive Resume

`get_component`

`get_component_demo`

`list_components`

`get_component_metadata`

`get_directory_structure`

`get_block`

`list_blocks`

`apply_theme`

`list_themes`

`get_theme`