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. - 🎯 Multi-Framework Support - React, Svelte, Vue, and React Native implementations - 📦 Component Source Code - Latest shadcn/ui v4 Typ
Add this skill
npx mdskills install Jpisnice/shadcn-ui-mcp-serverComprehensive MCP server providing shadcn/ui components across four frameworks with excellent documentation
1# Shadcn UI v4 MCP Server23[](https://badge.fury.io/js/@jpisnice%2Fshadcn-ui-mcp-server)4[](https://opensource.org/licenses/MIT)56[](https://archestra.ai/mcp-catalog/jpisnice__shadcn-ui-mcp-server)78> **🚀 The fastest way to integrate shadcn/ui components into your AI workflow**910A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to [shadcn/ui v4](https://ui.shadcn.com/) components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.1112## ✨ Key Features1314- **🎯 Multi-Framework Support** - React, Svelte, Vue, and React Native implementations15- **📦 Component Source Code** - Latest shadcn/ui v4 TypeScript source16- **🎨 Component Demos** - Example implementations and usage patterns17- **🏗️ Blocks Support** - Complete block implementations (dashboards, calendars, forms)18- **📋 Metadata Access** - Dependencies, descriptions, and configuration details19- **🔍 Directory Browsing** - Explore repository structures20- **⚡ Smart Caching** - Efficient GitHub API integration with rate limit handling21- **🌐 SSE Transport** - Server-Sent Events support for multi-client deployments22- **🐳 Docker Ready** - Production-ready containerization with Docker Compose2324## 🚀 Quick Start2526```bash27# Basic usage (60 requests/hour)28npx @jpisnice/shadcn-ui-mcp-server2930# With GitHub token (5000 requests/hour) - Recommended31npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here3233# Switch frameworks34npx @jpisnice/shadcn-ui-mcp-server --framework svelte35npx @jpisnice/shadcn-ui-mcp-server --framework vue36npx @jpisnice/shadcn-ui-mcp-server --framework react-native3738# Use Base UI instead of Radix (React only)39npx @jpisnice/shadcn-ui-mcp-server --ui-library base40```4142**🎯 Get your GitHub token in 2 minutes**: [docs/getting-started/github-token.md](docs/getting-started/github-token.md)4344## 📦 One-Click Installation (Claude Desktop)4546Download and double-click the `.mcpb` file for instant installation:47481. Download `shadcn-ui-mcp-server.mcpb` from [Releases](https://github.com/Jpisnice/shadcn-ui-mcp-server/releases)492. Double-click the file - Claude Desktop opens automatically503. Enter your GitHub token (optional, for higher rate limits)514. Click Install - tools are available immediately5253**Manual install:** Claude Desktop → Settings → MCP → Add Server → Browse → Select `.mcpb` file5455> **References:** [Anthropic Desktop Extensions](https://www.anthropic.com/engineering/desktop-extensions) | [Building MCPB](https://support.claude.com/en/articles/12922929-building-desktop-extensions-with-mcpb)5657## 🌐 SSE Transport & Docker Deployment5859Run the server with **Server-Sent Events (SSE)** transport for multi-client support and production deployments:6061### Quick Start with SSE62```bash63# SSE mode (supports multiple concurrent connections)64node build/index.js --mode sse --port 74236566# Docker Compose (production ready)67docker-compose up -d6869# Connect with Claude Code70claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse71```7273### Transport Modes74- **`stdio`** (default) - Standard input/output for CLI usage75- **`sse`** - Server-Sent Events for HTTP-based connections76- **`dual`** - Both stdio and SSE simultaneously7778### Docker Examples79```bash80# Basic container81docker run -p 7423:7423 shadcn-ui-mcp-server8283# With GitHub API token84docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server8586# Docker Compose (recommended)87docker-compose up -d88curl http://localhost:7423/health89```9091### Environment Variables92- `MCP_TRANSPORT_MODE` - Transport mode (stdio|sse|dual)93- `MCP_PORT` - SSE server port (default: 7423 - SHADCN on keypad!)94- `MCP_HOST` - Host binding (default: 0.0.0.0)95- `MCP_CORS_ORIGINS` - CORS origins (comma-separated)96- `GITHUB_PERSONAL_ACCESS_TOKEN` - GitHub API token97- `UI_LIBRARY` - UI primitive library: `radix` (default) or `base` (React only)9899## 📚 Documentation100101| Section | Description |102|---------|-------------|103| [🚀 Getting Started](docs/getting-started/) | Installation, setup, and first steps |104| [⚙️ Configuration](docs/configuration/) | Framework selection, tokens, and options |105| [🔌 Integration](docs/integration/) | Editor and tool integrations |106| [📖 Usage](docs/usage/) | Examples, tutorials, and use cases |107| [🎨 Frameworks](docs/frameworks/) | Framework-specific documentation |108| [🐛 Troubleshooting](docs/troubleshooting/) | Common issues and solutions |109| [🔧 API Reference](docs/api/) | Tool reference and technical details |110111## 🎨 Framework Support112113This MCP server supports four popular shadcn implementations:114115| Framework | Repository | Maintainer | Description |116|-----------|------------|------------|-------------|117| **React** (default) | [shadcn/ui](https://ui.shadcn.com/) | [shadcn](https://github.com/shadcn) | React components from shadcn/ui v4 |118| **Svelte** | [shadcn-svelte](https://www.shadcn-svelte.com/) | [huntabyte](https://github.com/huntabyte) | Svelte components from shadcn-svelte |119| **Vue** | [shadcn-vue](https://www.shadcn-vue.com/) | [unovue](https://github.com/unovue) | Vue components from shadcn-vue |120| **React Native** | [react-native-reusables](https://github.com/founded-labs/react-native-reusables) | [Founded Labs](https://github.com/founded-labs) | React Native components from react-native-reusables |121122### UI Library (React only)123124shadcn/ui v4 supports two primitive libraries for React: **Radix UI** (default) and **Base UI**.125126```bash127# Radix UI (default)128npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix129130# Base UI131npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base132133# Or via environment variable134UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server135```136137Claude Desktop config example:138```json139{140 "args": ["--framework", "react", "--ui-library", "base"]141}142```143144## 🛠️ Essential Setup145146### 1. Get GitHub Token (Recommended)147```bash148# Visit: https://github.com/settings/tokens149# Generate token with no scopes needed150export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here151```152153### 2. Run Server154```bash155# React (default)156npx @jpisnice/shadcn-ui-mcp-server157158# Svelte159npx @jpisnice/shadcn-ui-mcp-server --framework svelte160161# Vue162npx @jpisnice/shadcn-ui-mcp-server --framework vue163164# React Native165npx @jpisnice/shadcn-ui-mcp-server --framework react-native166```167168### 3. Integrate with Your Editor169- **Claude Code**: See [Claude Code Integration](#-claude-code-integration) below170- **VS Code**: [docs/integration/vscode.md](docs/integration/vscode.md)171- **Cursor**: [docs/integration/cursor.md](docs/integration/cursor.md)172- **Claude Desktop**: [docs/integration/claude-desktop.md](docs/integration/claude-desktop.md)173- **Continue.dev**: [docs/integration/continue.md](docs/integration/continue.md)174175## 💻 Claude Code Integration176177### Quick Add (CLI)178179```bash180# Add the shadcn-ui MCP server181claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN182```183184### SSE Transport185186For production deployments with SSE transport:187188```bash189# Start server in SSE mode190node build/index.js --mode sse --port 7423191192# Connect with Claude Code193claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse194```195196### Framework-Specific Commands197198See [Claude Code Integration Guide](docs/integration/claude-code.md) for framework-specific commands (React, Svelte, Vue, React Native).199200> **Reference:** [Claude Code MCP Documentation](https://code.claude.com/docs/en/mcp)201202## 🎯 Use Cases203204- **AI-Powered Development** - Let AI assistants build UIs with shadcn/ui205- **Multi-Client Deployments** - SSE transport supports multiple concurrent connections206- **Production Environments** - Docker Compose ready with health checks and monitoring207- **Component Discovery** - Explore available components and their usage208- **Multi-Framework Learning** - Compare React, Svelte, Vue, and React Native implementations209- **Rapid Prototyping** - Get complete block implementations for dashboards, forms, etc.210- **Code Generation** - Generate component code with proper dependencies211212## 📦 Installation213214```bash215# Global installation (optional)216npm install -g @jpisnice/shadcn-ui-mcp-server217218# Or use npx (recommended)219npx @jpisnice/shadcn-ui-mcp-server220```221222## 🔨 Building from Source223224### Prerequisites225226- Node.js >= 18.0.0227- npm or pnpm228229### Build Steps230231```bash232# Clone the repository233git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git234cd shadcn-ui-mcp-server235236# Install dependencies237npm install238239# Build the project240npm run build241242# Run the server243node build/index.js --github-api-key YOUR_TOKEN244```245246### Run Locally247248```bash249# After building, run with options250node build/index.js --github-api-key YOUR_TOKEN251node build/index.js --framework svelte252```253254### Building MCPB Package255256The project includes a `manifest.json` following the [MCPB specification](https://github.com/modelcontextprotocol/mcpb). The `.mcpb` file is a ZIP archive containing the server, dependencies, and configuration.257258See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed packaging instructions.259260> **Reference:** [Building Desktop Extensions with MCPB](https://support.claude.com/en/articles/12922929-building-desktop-extensions-with-mcpb)261262## 🔗 Quick Links263264- 📖 [Full Documentation](docs/)265- 🚀 [Getting Started Guide](docs/getting-started/)266- 🌐 [SSE Transport & Docker Guide](SSE_IMPLEMENTATION.md)267- 🎨 [Framework Comparison](docs/frameworks/)268- 🔧 [API Reference](docs/api/)269- 🐛 [Troubleshooting](docs/troubleshooting/)270- 💬 [Issues & Discussions](https://github.com/Jpisnice/shadcn-ui-mcp-server)271272## 📄 License273274MIT License - see [LICENSE](LICENSE) for details.275276## 🙏 Acknowledgments277278- **[shadcn](https://github.com/shadcn)** - For the amazing React UI component library279- **[huntabyte](https://github.com/huntabyte)** - For the excellent Svelte implementation280- **[unovue](https://github.com/unovue)** - For the comprehensive Vue implementation281- **[Founded Labs](https://github.com/founded-labs)** - For the React Native implementation282- **[Anthropic](https://anthropic.com)** - For the Model Context Protocol specification283284---285286**Made with ❤️ by [Janardhan Polle](https://github.com/Jpisnice)**287288**Star ⭐ this repo if you find it helpful!**289
Full transparency — inspect the skill content before installing.