shadcn-ui MCP Server

Name: shadcn-ui MCP Server
Author: ymadd

@ymadd

Repository

About shadcn-ui MCP Server

MCP server for shadcn/ui component references

#shadcn-ui #mcp-server

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

Get a list of all available shadcn/ui components

Get detailed information about a specific component

Get usage examples for a specific component

Search for components by keyword

Overview

What is shadcn-ui MCP Server?

A TypeScript-based MCP server that provides reference information for shadcn/ui components. It implements the Model Context Protocol to help AI assistants access shadcn/ui component documentation, examples, and code samples by scraping the official documentation site and GitHub repository.

How to use shadcn-ui MCP Server?

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.

Key features of shadcn-ui MCP Server

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

Use cases of shadcn-ui MCP Server

AI assistants answering questions about shadcn/ui components
Developers quickly fetching component installation instructions and props
Searching for components that match a specific UI need
Generating code examples for shadcn/ui usage in projects

FAQ from shadcn-ui MCP Server

What does the shadcn-ui MCP Server do?

It offers tools for AI assistants to list, search, and retrieve detailed reference information about shadcn/ui components, including descriptions, installation instructions, props, and usage examples.

How do I install and configure the server?

Install via npm install and build with npm run build. Configuration files differ per client: for Claude Desktop, edit claude_desktop_config.json; for Windsurf, edit model_config.json; for Cursor, edit .cursor/mcp.json. Use either a local build path or the npx command.

Where does the component data come from?

The server scrapes and caches information from the official shadcn/ui documentation site (https://ui.shadcn.com) and the shadcn/ui GitHub repository.

What are the runtime dependencies?

Node.js and npm are required. The server is written in TypeScript and relies on the MCP SDK. The README does not specify a minimum Node version.

How can I debug the server?

Use the MCP Inspector by running npm run inspector, which provides a URL to access debugging tools. Because MCP servers communicate over stdio, the Inspector is the recommended debugging method.