Jpisnice/shadcn-ui-mcp-server
shadcn-ui-mcp-server is hosted online, so all tools can be tested directly either in theInspector tabor in theOnline Client.
If you are the rightful owner of shadcn-ui-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.
The Shadcn UI v4 MCP Server is a Model Context Protocol server that provides AI assistants with access to shadcn/ui components, blocks, demos, and metadata.
Try shadcn-ui-mcp-server with chat:
Server config via mcphub
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, and Vue implementations for your AI-powered development workflow.
✨ Key Features
- 🎯 Multi-Framework Support - React, Svelte, and Vue 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
🚀 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
🎯 Get your GitHub token in 2 minutes:
📚 Documentation
| Section | Description |
|---|---|
| Installation, setup, and first steps | |
| Framework selection, tokens, and options | |
| Editor and tool integrations | |
| Examples, tutorials, and use cases | |
| Framework-specific documentation | |
| Common issues and solutions | |
| Tool reference and technical details |
🎨 Framework Support
This MCP server supports three 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 |
🛠️ 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
3. Integrate with Your Editor
- VS Code:
- Cursor:
- Claude Desktop:
- Continue.dev:
🎯 Use Cases
- AI-Powered Development - Let AI assistants build UIs with shadcn/ui
- Component Discovery - Explore available components and their usage
- Multi-Framework Learning - Compare React, Svelte, and Vue 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
🔗 Quick Links
- 📖
- 🚀
- 🎨
- 🔧
- 🐛
- 💬 Issues & Discussions
📄 License
MIT License - see for details.
🙏 Acknowledgments
- shadcn - For the amazing React UI component library
- huntabyte - For the excellent Svelte implementation
- unovue - For the comprehensive Vue implementation
- Anthropic - For the Model Context Protocol specification
Made with ❤️ by Janardhan Polle
Star ⭐ this repo if you find it helpful!
