shadcn/ui MCP
Helps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.
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 helps ai assistants access shadcn/ui component documentation and examples through a typescript-based mcp server that provides reference information for component details, usage examples, and search ca...
Helps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Helps AI assistants access shadcn/ui component documentation
Use Cases
Maintainer
Works with
Installation
NPM
npx -y shadcn-ui-mcp-serverManual Installation
npx -y shadcn-ui-mcp-serverConfiguration
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 is a TypeScript-based MCP server that gives AI assistants direct access to the shadcn/ui component library's documentation, usage examples, and component metadata. It exposes tools to list all available components, retrieve detailed docs for specific components, fetch code examples, and search components by keyword — enabling AI coding assistants to reference accurate, up-to-date shadcn/ui information while generating or reviewing React code.
Prerequisites
- Node.js 18 or higher (for running the npx command)
- An MCP-compatible client such as Claude Desktop, Cursor, or Windsurf
- A project using shadcn/ui (React/Next.js) where you want component guidance
Verify Node.js version
Ensure you have Node.js 18 or higher installed, which is required to run the server via npx.
node --versionTest the server with npx
Run the server once with npx to confirm it starts correctly before adding it to your client config.
npx -y shadcn-ui-mcp-serverOpen your MCP client configuration file
Locate the configuration file for your MCP client. For Claude Desktop on macOS it is at ~/Library/Application Support/Claude/claude_desktop_config.json; on Windows it is at %APPDATA%/Claude/claude_desktop_config.json.
Add the server configuration
Insert the shadcn-ui-mcp-server entry into the mcpServers object in your config file. No API keys or environment variables are required.
Restart your MCP client
Close and reopen Claude Desktop (or your chosen client) to pick up the new configuration. The shadcn/ui tools will now be available.
shadcn/ui MCP Examples
Client configuration
Add this to your claude_desktop_config.json to enable shadcn/ui documentation tools in Claude. No API keys are required.
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Prompts to try
Use these prompts in Claude to get shadcn/ui component guidance while building your React app.
- "List all available shadcn/ui components"
- "Show me the full documentation and props for the shadcn/ui Dialog component"
- "Give me a code example of a shadcn/ui DataTable with sorting and filtering"
- "Search for shadcn/ui components related to forms and input validation"
- "How do I install and use the shadcn/ui Combobox in my Next.js project?"Troubleshooting shadcn/ui MCP
npx command takes a long time on first run
The first run downloads the package from npm. Subsequent runs use the cached version and start much faster. Run npx -y shadcn-ui-mcp-server once manually to pre-populate the cache.
Tools not appearing in Claude Desktop after adding config
Ensure the JSON in your config file is valid (no trailing commas, all braces matched). Fully quit and reopen Claude Desktop — a simple window close may not restart the MCP server process.
Component documentation appears outdated
The server fetches data from the official shadcn/ui documentation site and GitHub. If docs seem stale, check https://ui.shadcn.com directly; the server reflects whatever the live docs site currently contains.
Frequently Asked Questions about shadcn/ui MCP
What is shadcn/ui MCP?
shadcn/ui MCP is a Model Context Protocol (MCP) server that helps ai assistants access shadcn/ui component documentation and examples through a typescript-based mcp server that provides reference information for component details, usage examples, and search capabilities. 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-mcp-server. 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.