Shadcn UI v4 MCP Server
Give AI assistants full access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native.
Add to your client
Copy the config for your MCP client and paste it into its config file.
npx @jpisnice/shadcn-ui-mcp-serverPaste into ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"shadcn-ui-v4-mcp-server": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server",
"--github-api-key",
"ghp_your_token_here"
]
}
}
}Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf
Before you start
- Node.js >= 18.0.0
- An MCP-compatible client (Claude Desktop, Claude Code, Cursor, VS Code, Continue.dev)
- Optional: a GitHub Personal Access Token (no scopes needed) to raise the API rate limit to 5000 requests/hour
About Shadcn UI v4 MCP Server
An MCP server that exposes shadcn/ui v4 components, blocks, demos, and metadata to AI assistants. It fetches source code and usage examples on demand from the upstream shadcn repositories via the GitHub API, with multi-framework support (React, Svelte, Vue, React Native) and smart caching with rate-limit handling.
Tools & capabilities (7)
get_componentGet the source code for a specific shadcn/ui component.
get_component_demoGet example/demo code showing how to use a component.
list_componentsList all available shadcn/ui components.
get_component_metadataGet a component's dependencies, description, and configuration details.
get_blockGet a complete block implementation (e.g. dashboards, calendars, forms).
list_blocksList all available blocks with their categories.
get_directory_structureExplore the repository directory structure for components and blocks.
When to use it
- Let AI assistants build UIs using accurate, up-to-date shadcn/ui components
- Generate complete block implementations (dashboards, forms, calendars) for rapid prototyping
- Discover available components and inspect their dependencies before adding them
- Compare React, Svelte, Vue, and React Native implementations of the same component
- Run as an SSE service with Docker Compose for multi-client/production deployments
Security notes
Works without authentication at 60 GitHub API requests/hour. A GitHub Personal Access Token (no scopes required) is optional but recommended to raise the limit to 5000 requests/hour; pass it via the --github-api-key flag or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable. Avoid hardcoding the token in shared config files.
Shadcn UI v4 MCP Server FAQ
Do I need a GitHub token?
No. The server works without one at 60 requests/hour. Adding a GitHub Personal Access Token (no scopes required) raises the limit to 5000 requests/hour, which is recommended for regular use.
Which frameworks are supported?
React (default, via shadcn/ui v4), Svelte (shadcn-svelte), Vue (shadcn-vue), and React Native (react-native-reusables). Select one with the --framework flag. For React you can also choose Radix UI or Base UI primitives via --ui-library.
What transport modes are available?
stdio (default, for CLI and editor integrations), sse (Server-Sent Events for HTTP/multi-client deployments), and dual (both simultaneously). The SSE server defaults to port 7423.
How do I install it in Claude Desktop?
Add an mcpServers entry running npx @jpisnice/shadcn-ui-mcp-server, or download the .mcpb file from Releases and double-click it for one-click installation.
Alternatives to Shadcn UI v4 MCP Server
Compare all alternatives →
Popular community server that feeds Figma layout data to coding agents via a Figma API token.
Generate beautiful, modern UI components from natural-language descriptions inside your IDE.
Official MiniMax server for TTS, voice cloning, music, image, and video generation.
Compare Shadcn UI v4 MCP Server with: