shadcn-ui MCP Server
The shadcn-ui MCP Server is a TypeScript-based server that provides reference information for shadcn/ui components. With this server, you can:
List all available shadcn/ui components using
list_shadcn_componentsGet detailed information about specific components using
get_component_detailsAccess usage examples for components using
get_component_examplesSearch for components by keywords using
search_components
Provides reference information for shadcn/ui components, including component listings, detailed documentation, usage examples, and search functionality. Scrapes and caches data from the official documentation site and GitHub repository.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@shadcn-ui MCP Servershow me examples for the Button component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
Features
Tools
list_shadcn_components- Get a list of all available shadcn/ui componentsget_component_details- Get detailed information about a specific componentget_component_examples- Get usage examples for a specific componentsearch_components- Search for components by keyword
Functionality
This server scrapes and caches information from:
The official shadcn/ui documentation site (https://ui.shadcn.com)
The shadcn/ui GitHub repository
It provides structured data including:
Component descriptions
Installation instructions
Usage examples
Props and variants
Code samples
Related MCP server: @jpisnice/shadcn-ui-mcp-server
Development
Install dependencies:
npm installBuild the server:
npm run buildFor development with auto-rebuild:
npm run watchInstallation
Claude Desktop Configuration
To use with Claude Desktop, add the server config:
On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
On Windows: %APPDATA%/Claude/claude_desktop_config.json
Option 1: Using local build
{
"mcpServers": {
"shadcn-ui-server": {
"command": "/path/to/shadcn-ui-server/build/index.js"
}
}
}Option 2: Using npx command
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Windsurf Configuration
Add this to your ./codeium/windsurf/model_config.json:
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Cursor Configuration
Add this to your .cursor/mcp.json:
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Debugging
Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:
npm run inspectorThe Inspector will provide a URL to access debugging tools in your browser.
Available Tools
4 toolsget_component_detailsB
Get detailed information about a specific shadcn/ui component
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the shadcn/ui component (e.g., "accordion", "button") |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states this is a read operation ('Get detailed information'), which is helpful, but it doesn't describe what 'detailed information' includes (e.g., properties, usage, dependencies), whether there are rate limits, authentication requirements, or error handling. For a tool with zero annotation coverage, this leaves significant gaps in understanding its behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's front-loaded with the core action and resource, making it easy to parse quickly. There's no wasted language, and it earns its place by providing essential context.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (1 parameter, no output schema, no annotations), the description is minimally adequate. It covers the basic purpose but lacks details on what 'detailed information' entails, which is critical since there's no output schema to clarify the return values. For a tool that presumably returns structured data about components, more context on the output would improve completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the parameter 'componentName' clearly documented in the schema as 'Name of the shadcn/ui component (e.g., "accordion", "button")'. The description doesn't add any additional meaning beyond what the schema provides, such as format constraints or examples not already covered. With high schema coverage, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('Get detailed information') and resource ('specific shadcn/ui component'), making the purpose immediately understandable. It distinguishes from 'list_shadcn_components' (which likely lists all components) and 'search_components' (which likely searches across components), though it doesn't explicitly differentiate from 'get_component_examples' which might overlap in retrieving component-related information.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage when detailed information about a specific component is needed, but it doesn't provide explicit guidance on when to use this tool versus alternatives like 'get_component_examples' or 'search_components'. There's no mention of prerequisites, exclusions, or specific scenarios where this tool is preferred over siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_examplesB
Get usage examples for a specific shadcn/ui component
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the shadcn/ui component (e.g., "accordion", "button") |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool retrieves examples but does not describe any behavioral traits such as rate limits, authentication needs, error handling, or the format of returned examples. This leaves significant gaps in understanding how the tool operates beyond its basic purpose.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any unnecessary words. It is front-loaded and appropriately sized for a simple tool, making it easy for an agent to parse and understand quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (one parameter, no output schema, no annotations), the description is adequate but incomplete. It covers the basic purpose but lacks details on behavioral aspects and usage guidelines, which are important for effective tool invocation. Without annotations or output schema, more context in the description would be beneficial.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with the parameter 'componentName' clearly documented in the input schema. The description adds minimal value beyond this, as it only reiterates the need for a component name without providing additional context like valid examples or constraints. This meets the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with a specific verb ('Get') and resource ('usage examples for a specific shadcn/ui component'), making it immediately understandable. However, it does not explicitly differentiate from sibling tools like 'get_component_details' or 'search_components', which might also provide example-related information, so it falls short of a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'get_component_details' or 'search_components'. It implies usage for retrieving examples but offers no context on prerequisites, exclusions, or specific scenarios, leaving the agent to infer usage based on the tool name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_shadcn_componentsB
Get a list of all available shadcn/ui components
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool 'gets a list' but doesn't describe what the list contains (e.g., names, metadata), how it's formatted, or any limitations (e.g., pagination, rate limits). For a tool with zero annotation coverage, this leaves significant gaps in understanding its behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's function without any wasted words. It's appropriately sized and front-loaded, making it easy to understand at a glance.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of annotations and no output schema, the description is incomplete for a tool that likely returns a list of components. It doesn't explain what the output includes (e.g., component names, descriptions, categories) or any behavioral traits. For a tool with no structured data to rely on, the description should provide more context about the return values and usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, and the schema description coverage is 100% (as there are no parameters to describe). The description doesn't need to add parameter information, so it meets the baseline expectation. No additional value is required beyond stating the tool's purpose.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with a specific verb ('Get') and resource ('list of all available shadcn/ui components'). It distinguishes itself from siblings by focusing on listing all components rather than getting details, examples, or searching. However, it doesn't explicitly mention how it differs from 'search_components' in terms of scope or filtering.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus its siblings. It doesn't mention alternatives like 'search_components' for filtered results or 'get_component_details' for specific information. There's no context about prerequisites, timing, or exclusions for usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsB
Search for shadcn/ui components by keyword
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query to find relevant components |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool searches by keyword but doesn't describe how results are returned (e.g., format, pagination), performance traits (e.g., rate limits), or error handling. This leaves significant gaps in understanding the tool's behavior beyond the basic action.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core action and resource, making it easy to understand at a glance. Every part of the sentence contributes essential information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of annotations and output schema, the description is incomplete for a search tool. It doesn't explain what the search returns (e.g., list of component names, metadata), how results are structured, or any limitations (e.g., search scope, result ordering). For a tool with no structured behavioral data, this leaves critical gaps in understanding its functionality.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the single parameter 'query' documented as 'Search query to find relevant components'. The description adds minimal value beyond this, as it only repeats the keyword-based search concept without providing additional syntax, examples, or constraints. Baseline 3 is appropriate given the high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Search for') and target resource ('shadcn/ui components'), specifying the method ('by keyword'). It distinguishes from sibling tools like 'list_shadcn_components' by indicating a keyword-based search rather than a simple listing. However, it doesn't explicitly contrast with 'get_component_details' or 'get_component_examples', which are more specific retrieval tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for finding components via keywords, suggesting it's for discovery rather than detailed retrieval. However, it lacks explicit guidance on when to use this tool versus alternatives like 'list_shadcn_components' (e.g., for unfiltered listing) or 'get_component_details' (e.g., for specific component info). No exclusions or prerequisites are mentioned.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each tool has a clearly distinct purpose with no overlap: list_shadcn_components provides all components, get_component_details gives detailed info, get_component_examples shows usage examples, and search_components enables keyword-based discovery. An agent can easily distinguish between these four operations.
All tool names follow a consistent verb_noun pattern (get_component_details, get_component_examples, list_shadcn_components, search_components) with clear, descriptive verbs (get, list, search) and consistent snake_case formatting throughout.
Four tools is well-scoped for a component documentation server, providing essential operations (list, search, get details, get examples) without bloat. Each tool earns its place in supporting component discovery and usage workflows.
The toolset covers core documentation needs well: discovery (list/search) and component information (details/examples). A minor gap exists in lacking installation/implementation guidance tools, but agents can work around this with the provided information.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
The Remote MCP server acts as a standardized bridge between LLM applications (like Claude, ChatGPT, and Cursor) and external services, enabling AI agents to access external tools and resources. Its primary capability is providing a centralized search tool to discover other MCP servers and their respective tools. Unlike local implementations, it runs remotely with OAuth authentication and permission controls for security.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
Search GitHub, npm, PyPI, StackOverflow, ArXiv from one MCP — built for coding agents.
Related MCP Servers
- AlicenseAqualityDmaintenanceProvides reference information for shadcn/ui components through a Model Context Protocol server that helps AI assistants access component documentation and examples.4617MIT
- AlicenseAqualityDmaintenanceA mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation106,4732,969MIT
- FlicenseAqualityDmaintenanceProvides AI assistants with direct access to shadcn/ui components and blocks, enabling real-time fetching of component source code, documentation, and implementation examples.4304
- AlicenseAqualityBmaintenanceMCP server for Shadcn Dashboard that enables AI to discover, search, and install UI blocks directly into projects without copy-paste.646MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ymadd/shadcn-ui-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server