Shadcn UI

Provides access to shadcn/ui component data, including descriptions, installation steps, props, and usage examples via MCP endpoints.

javascript

0

GitHub Stars

javascript

Language

7 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You can run a TypeScript MCP server that provides reference data for shadcn/ui components. It exposes endpoints for listing components, fetching details, getting usage examples, and searching components, helping AI assistants retrieve accurate component guidance and code samples.

How to use

Connect an MCP client to the server to access component data and examples. You can list all available components, request detailed information for a specific component, retrieve usage examples, and perform keyword searches to discover components that match your needs. The server returns structured data that includes component descriptions, installation steps, props, variants, and practical code samples, enabling you to quickly look up how to integrate shadcn/ui components into your project.

How to install

Prerequisites: you need Node.js and npm installed on your system.

Install dependencies and build the MCP server.

npm install

npm run build

npm run watch

Configuration and running tips

This MCP server can be run locally or accessed via a package manager. The following configurations show how you can connect Claude Desktop or Windsurf to the MCP server depending on your environment.

Claude Desktop configuration (local build) shows a direct path to the built entry point.

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

Claude Desktop configuration (using npx) shows how to run the MCP server via npx.

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

Additional configuration notes

If you are using Windsurf or Cursor, add the MCP server configuration to your model or cursor file to enable seamless access to the MCP endpoints.

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

Debugging and inspection

MCP servers communicate over stdio, so debugging can be tricky. Use the Inspector tool to access debugging utilities. Install and run the inspector to get a URL for debugging in your browser.

npm run inspector

Available tools

list_shadcn_components

Retrieve a list of all available shadcn/ui components that the server can reference.

get_component_details

Fetch detailed information about a specific component, including props and variants.

get_component_examples

Obtain usage examples for a given component to illustrate proper usage.

search_components

Search for components by keyword to locate relevant references quickly.