Shadcn UI MCP Server is a Model Context Protocol server that enables AI assistants to access comprehensive information about shadcn/ui v4 components, including source code, usage examples, demos, and installation instructions. Key features of Shadcn UI MCP Server: - Multi-framework support for React, Svelte 5, Vue, and React Native component implementations - Access to component source code, interactive demos, and complete block implementations (dashboards, calendars, forms) - Metadata retrieval including dependencies, descriptions, and configuration details - Directory browsing for exploring shadcn/ui repository structures - GitHub API integration with smart caching and rate limit handling - SSE (Server-Sent Events) transport support for multi-client deployments - Docker-ready containerization for production environments

Shadcn UI v4 MCP Server

[](https://badge.fury.io/js/@jpisnice%2Fshadcn-ui-mcp-server) [](https://opensource.org/licenses/MIT)

[](https://archestra.ai/mcp-catalog/jpisnice__shadcn-ui-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

🚀 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

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

📚 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 | |-----------|------------|------------|-------