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

Related MCP server: MCP LLMS-TXT Documentation Server

🚀 Quick Start

🎯 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

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

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

🎨 Framework Support

This MCP server supports four popular shadcn implementations:

UI Library (React only)

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

Claude Desktop config example:

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

2. Run Server

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)

SSE Transport

For production deployments with SSE transport:

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

🔨 Building from Source

Prerequisites

• Node.js >= 18.0.0

• npm or pnpm

Build Steps

Run Locally

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

Star ⭐ this repo if you find it helpful!