Happy slice of mcp pizzaMCP.pizza

shadcn-ui-mcp-unofficial

MCP.Pizza Chef: Jpisnice

Coding assistants tend to invent component code that does not match the actual library. This hands them the genuine shadcn/ui source, live demos, and prebuilt blocks such as dashboards, calendars, and login forms, in React, Svelte, Vue, or React Native. It plugs into Claude Desktop, Claude Code, Cursor, VS Code, and Continue. A free GitHub access key is optional but worth adding, since it lifts the hourly request limit from sixty to five thousand.

Coding
Images/Design

Use This MCP server To

Get the real code for a component instead of a guess Build a dashboard page from a ready-made block See a working example of a form before I copy it Check which packages a component needs first Get the Svelte or Vue version of a component Browse what components are available without leaving my editor

README

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

🚀 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

shadcn-ui-mcp-unofficial FAQ

Which editors does this work in?
Claude Desktop, Claude Code, Cursor, VS Code, and Continue.
Can I use this to build a dashboard page?
Yes. It ships complete block implementations for dashboards, calendars, and forms that your assistant can drop in.
Do I need a GitHub access key?
No, but without one you are capped at sixty requests an hour instead of five thousand.
Does it cover frameworks other than React?
Yes. Svelte, Vue, and React Native are all supported, and React can use either Radix or Base primitives.
How hard is the setup?
Claude Desktop users can double-click a downloadable installer. Everyone else pastes one short command into their editor settings.
Is this the official shadcn project?
No. It is a community-built connector that reads from the public shadcn repositories.