home / mcp / shadcn ui mcp server
A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
Configuration
View docs{
"mcpServers": {
"jpisnice-shadcn-ui-mcp-server": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
}
}
}
}This MCP server provides AI assistants with broad access to shadcn/ui v4 components, blocks, demos, and metadata across multiple frameworks, enabling you to explore, integrate, and prototype UI patterns in your AI-powered workflows.
You use the server by running the MCP client locally or in a deployment and connecting your editor or AI assistant to fetch component data, blocks, and metadata for React, Svelte, Vue, and React Native implementations. Start with a basic run, optionally supply your GitHub token to increase request limits, and switch between frameworks to explore the corresponding implementations. The server supports multiple clients through SSE for production deployments.
Prerequisites: ensure you have Node.js version 18 or newer and either npm or pnpm installed.
1) Install or run via npx to start quickly.
2) If you need higher GitHub API rate limits, provide a personal access token when starting the server.
3) Choose a framework if you want to explore framework-specific implementations: React (default), Svelte, Vue, or React Native.
The server can be run in multiple transport modes for client connections. The default mode uses standard input/output (stdio). Server-Sent Events (SSE) mode enables multi-client connections for production deployments. You can also run both modes concurrently if needed.
Environment variables you may encounter include a GitHub personal access token for higher rate limits and a UI library selector for React when using the Base UI variant.
If you want to run in a production-like setting, consider using Docker Compose for containerized deployment and health monitoring.
- Start a quick session with default settings: run the MCP server and connect via your editor or Claude Code integration.
- Switch frameworks to compare component sets across React, Svelte, Vue, and React Native.
- Use a GitHub token to increase available requests per hour when exploring large component trees or metadata.
If you encounter networking or token-related errors, verify your token value and ensure the server has access to reach GitHub APIs. For multi-client deployments with SSE, ensure your client connections are configured to listen to the SSE endpoint and that the server port is accessible in your environment.