shadcn-ui MCP Server
About
Provides structured data for shadcn/ui components, including descriptions, installation instructions, usage examples, and props.
Details
- Author
- ymadd
- GitHub stars
- 60
- Downloads
- 408
- Categories
- Developer Tools, Knowledge Base, Other
Jump to
- Lists all available shadcn/ui components
- Retrieves detailed component information (descriptions, installation steps)
- Provides usage examples with code samples
- Searches components by keyword
- Caches scraped data from official sources
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
shadcn-ui MCP ServerCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Install dependencies with npm install, then build with npm run build. Configure the server in Claude Desktop, Windsurf, or Cursor by adding a JSON entry to the respective configuration file, pointing either to the local build or using the npx command npx -y shadcn-ui-mcp-server.
list_shadcn_components
Get a list of all available shadcn/ui components
get_component_details
Get detailed information about a specific shadcn/ui component
get_component_examples
Get usage examples for a specific shadcn/ui component
search_components
Search for shadcn/ui components by keyword
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"shadcn-ui mcp server": {
"shadcn-ui-server": {
"command": "npx",
"args": [
"-y",
"shadcn-ui-mcp-server"
]
}
}
}
}McpServers
{
"shadcn-ui-server": {
"command": "npx",
"args": [
"-y",
"shadcn-ui-mcp-server"
]
}
}MCP server for shadcn/ui component references
This is a TypeScript-based MCP server that provides reference information for shadcn/ui components. It implements a Model Context Protocol (MCP) server that helps AI assistants access shadcn/ui component documentation and examples.
- list_shadcn_components- Get a list of all available shadcn/ui components
- get_component_details- Get detailed information about a specific component
- get_component_examples- Get usage examples for a specific component
- search_components- Search for components by keyword
This server scrapes and caches information from:
- The official shadcn/ui documentation site (https://ui.shadcn.com)
- The shadcn/ui GitHub repository
- Component descriptions
- Installation instructions
- Usage examples
- Props and variants
- Code samples
To use with Claude Desktop, add the server config:
On MacOS:~/Library/Application Support/Claude/claude_desktop_config.jsonOn Windows:%APPDATA%/Claude/claude_desktop_config.json
{ "mcpServers": { "shadcn-ui-server": { "command": "/path/to/shadcn-ui-server/build/index.js" } } }
{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["-y", "shadcn-ui-mcp-server"] } } }
Add this to your./codeium/windsurf/model_config.json:
{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["-y", "shadcn-ui-mcp-server"] } } }
{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["-y", "shadcn-ui-mcp-server"] } } }
Since MCP servers communicate over stdio, debugging can be challenging. We recommend using theMCP Inspector, which is available as a package script:
The Inspector will provide a URL to access debugging tools in your browser.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent
MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.
One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.
Local stdio MCP server that lets AI coding agents read and maintain structured architecture, rules, and decisions directly from your repository.
The MCP server for Bitrix24 provides AI assistants with structured access to the Bitrix24 API. It delivers up-to-date method descriptions, parameters, and valid values, allowing assistants to work with precise data instead of guesswork. This reduces code errors and accelerates Bitrix24 integration development.
Official Context7 MCP server that brings up-to-date, version-specific library documentation and code examples into AI coding prompts.
Remote, no-auth MCP server providing AI-powered codebase context and answers
Extentos is a multi-vendor development platform for adding smart-glasses capabilities to existing iOS and Android apps. The simplest analogy is Stripe for smart glasses
An MCP server tailored for React Native–first development using Gluestack UI
Create and read feature flags, review experiments, generate flag types, search docs, and interact with GrowthBook's feature flagging and experimentation platform.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
