Labsco
Jpisnice logo

shadcn/ui MCP

★ 2,800

from Jpisnice

shadcn/ui MCP server that provides structured component context, installation guidance, usage examples, and props for React, Svelte, and Vue UI work.

🔥🔥🔥🔥✓ VerifiedFreeAdvanced setup
#automation#calendar#documents#devops#git#monitoring

Shadcn UI v4 MCP Server

npm version License: MIT

Trust Score

🚀 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

📚 Documentation

SectionDescription
🚀 Getting StartedInstallation, setup, and first steps
⚙️ ConfigurationFramework selection, tokens, and options
🔌 IntegrationEditor and tool integrations
📖 UsageExamples, tutorials, and use cases
🎨 FrameworksFramework-specific documentation
🐛 TroubleshootingCommon issues and solutions
🔧 API ReferenceTool reference and technical details

🎨 Framework Support

This MCP server supports four popular shadcn implementations:

FrameworkRepositoryMaintainerDescription
React (default)shadcn/uishadcnReact components from shadcn/ui v4
Svelteshadcn-sveltehuntabyteSvelte components from shadcn-svelte
Vueshadcn-vueunovueVue components from shadcn-vue
React Nativereact-native-reusablesFounded LabsReact 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.

Copy & paste — that's it
# 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:

Copy & paste — that's it
{
  "args": ["--framework", "react", "--ui-library", "base"]
}

💻 Claude Code Integration

Quick Add (CLI)

Copy & paste — that's it
# 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:

Copy & paste — that's it
# 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

🔨 Building from Source

Prerequisites

  • Node.js >= 18.0.0
  • npm or pnpm

Build Steps

Copy & paste — that's it
# 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

Copy & paste — that's it
# 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

📄 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!