shadcn-ui

The shadcn-ui MCP Server provides a structured interface to access and reference shadcn/ui components. It exposes tools to list all available components, fetch detailed information for a specific component, retrieve usage examples, and search components by keyword. This enables AI assistants and developers to quickly gather component descriptions, installation instructions, usage samples, props, variants, and code samples directly from the MCP server. Use the list_shadcn_components tool to get the full catalog, then call get_component_details for in-depth info on a chosen component. If you need practical usage guidance, get_component_examples returns example usage snippets you can copy into your projects. The search_components tool helps you find components by keyword when you’re exploring the library.

Prerequisites:

• Node.js (v14+ recommended) and npm/yarn installed
• Access to the MCP server source or published package (shadcn-ui-mcp-server)

Option A: Install and run from source

1. Clone the repository or download the source for the MCP server.
2. Install dependencies:

npm install

3. Build the server (TypeScript project):

npm run build

4. Run in development/watch mode (auto-rebuild on changes):

npm run watch

5. If you want to use the local build with Claude or other clients, point your config to the built entry:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "node",
      "args": ["/path/to/shadcn-ui-server/build/index.js"]
    }
  }
}

Option B: Use the published npm package (npx)

1. Ensure you have access to the MCP server package (shadcn-ui-mcp-server) on npm.
2. Configure the server via npx when starting:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

3. Start the server according to your environment (Claude Desktop, Windsurf, etc.).

Notes:

• The MCP server scrapes and caches data from https://ui.shadcn.com and the shadcn/ui GitHub repository to provide component descriptions, installation instructions, usage examples, props, and variants.
• If you modify the server or run locally, ensure the built entry point (build/index.js) is up to date.
• For debugging, use the MCP Inspector tool; run npm run inspector to get a debugging URL.
• The configuration examples assume a single shadcn-ui-server instance; you can adapt the server name and path to your environment.
• Environment variables can be added under env in the MCP config to customize behavior (e.g., CACHE_DIR, API_BASE_URL, LOG_LEVEL).