mcpField
S
shadcn-ui MCP Server

shadcn-ui MCP Server

Local
github.com/mamba-mentalDeveloper Tools1Updated 77w ago
Repository

About shadcn-ui MCP Server

shadcn-ui MCP Server gives AI assistants structured references for shadcn/ui components. It provides component listings, details, examples, and keyword search sourced from the documentation site and GitHub repository.

Key features

  1. 01List available components
  2. 02Retrieve component details
  3. 03Fetch usage examples
  4. 04Search by keyword
  5. 05Provide props, variants, and code

Use cases

  1. 01Looking up a component while building an interface
  2. 02Checking component props and variants
  3. 03Finding an example for a component

MCP support

It exposes shadcn/ui component reference tools to MCP clients, including listing, detail retrieval, examples, and search.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "shadcn-ui-mcp-server-mamba-mental": {
      "command": "npx",
      "args": [
        "-y",
        "shadcn-ui-mcp-server"
      ]
    }
  }
}
Run commandnpx -y shadcn-ui-mcp-server

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmshadcn-ui-mcp-server

Tools

4

Saved tool list · updated 3w ago

This tool takes no parameters.

Details

From the project README

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 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
Functionality

This server scrapes and caches information from:

It provides structured data including:

  • Component descriptions
  • Installation instructions
  • Usage examples
  • Props and variants
  • Code samples

Development

Install dependencies:

npm install

Build the server:

npm run build

For development with auto-rebuild:

npm run watch

Installation

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 inspector

The Inspector will provide a URL to access debugging tools in your browser.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.