shadcn/ui MCP
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
What is shadcn/ui MCP?
shadcn/ui MCP is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to mcp server to allow llms gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & react native
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- list-components
- get-component-docs
- install-component
- list-blocks
- get-block-docs
Use Cases
Maintainer
Works with
Installation
NPM
npx -y shadcn-uiManual Installation
npx -y shadcn-uiConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use shadcn/ui MCP
The shadcn/ui MCP server (@jpisnice/shadcn-ui-mcp-server) gives AI coding assistants comprehensive, real-time access to shadcn/ui v4 component source code, demos, blocks, and metadata directly from the official GitHub repository. It supports React, Svelte 5, Vue, and React Native (Expo) frameworks and includes block implementations such as dashboards, forms, and calendars. Developers use it so their AI assistant can reference the exact current component API, dependencies, and usage patterns — eliminating hallucinated props or outdated component structures when generating UI code.
Prerequisites
- Node.js 18+ or Bun runtime for the npx/bunx launcher
- An MCP client such as Claude Desktop, Claude Code, or Cursor
- A GitHub Personal Access Token (recommended) to avoid GitHub API rate limits — the server fetches component data directly from GitHub
- Optional: a target framework choice (react, svelte, vue, or react-native) if not using the default React
Test the server with npx
Run the server once without installing it to confirm it works in your environment. Pass your GitHub token to avoid rate limiting on the GitHub API calls.
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_hereAdd to Claude Code via the mcp add command
The fastest integration path for Claude Code is the mcp add command. Use bunx for faster cold starts.
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKENConfigure Claude Desktop (JSON config)
Add the server to your Claude Desktop MCP configuration. Pass your GitHub token and optionally specify a framework for non-React projects.
{
"mcpServers": {
"shadcn-ui": {
"command": "npx",
"args": [
"-y",
"@jpisnice/shadcn-ui-mcp-server",
"--github-api-key",
"ghp_your_token_here"
]
}
}
}Select a framework other than React
Pass the --framework flag to switch to Svelte 5, Vue, or React Native component implementations. Each framework uses the corresponding shadcn/ui port's source.
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --github-api-key ghp_your_tokenRun in SSE mode for multi-client team setups
Start the server in SSE transport mode when multiple developers need to share the same MCP server instance. It listens on port 7423 by default.
GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token MCP_TRANSPORT_MODE=sse npx @jpisnice/shadcn-ui-mcp-servershadcn/ui MCP Examples
Client configuration
Claude Desktop configuration for the shadcn/ui MCP server using React (default). Replace the GitHub token with your actual PAT.
{
"mcpServers": {
"shadcn-ui": {
"command": "npx",
"args": [
"-y",
"@jpisnice/shadcn-ui-mcp-server",
"--github-api-key",
"ghp_your_github_token_here"
],
"env": {
"UI_LIBRARY": "radix"
}
}
}
}Prompts to try
Prompts that put the shadcn/ui MCP server's component knowledge to work inside your coding assistant.
- "List all available shadcn/ui v4 components"
- "Show me the full source code for the shadcn/ui DataTable component"
- "What dependencies do I need to install for the shadcn/ui Calendar block?"
- "Generate a login form using shadcn/ui Input, Label, and Button components with correct imports"
- "Show me the shadcn/ui dashboard block and explain each sub-component"Troubleshooting shadcn/ui MCP
GitHub API rate limit errors when fetching components
The server makes multiple GitHub API calls to retrieve component source. Without a token, the unauthenticated rate limit (60 req/hour) is easily exceeded. Create a GitHub Personal Access Token (read-only, public repos scope) and pass it via --github-api-key or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable.
Components return empty source or 'not found' for a specific framework
Not all components are available for every framework port. Check the shadcn/ui documentation for your framework (svelte, vue, react-native) to confirm the component exists. Switch back to --framework react as the most complete implementation.
Server starts but Claude Desktop shows no tools available
Restart Claude Desktop after editing the config file — it only reads the config on startup. Also verify the JSON syntax is valid (no trailing commas) using a JSON linter before restarting.
Frequently Asked Questions about shadcn/ui MCP
What is shadcn/ui MCP?
shadcn/ui MCP is a Model Context Protocol (MCP) server that mcp server to allow llms gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & react native It connects AI assistants to external tools and data sources through a standardized interface.
How do I install shadcn/ui MCP?
Install via npm with the command: npx -y shadcn-ui. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with shadcn/ui MCP?
shadcn/ui MCP works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is shadcn/ui MCP free to use?
Yes, shadcn/ui MCP is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
shadcn/ui MCP Alternatives — Similar Developer Tools Servers
Looking for alternatives to shadcn/ui MCP? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up shadcn/ui MCP in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use shadcn/ui MCP?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.