mcpField
S
Shadcn UI MCP Server

Shadcn UI MCP Server

Local
github.com/heilgarDeveloper Tools26Updated 75w ago
Repository

About Shadcn UI MCP Server

Shadcn UI MCP Server is an MCP server for looking up and installing shadcn/ui components and blocks from an AI client. It targets developers building frontend interfaces with shadcn/ui and supports npm, pnpm, yarn and bun.

Key features

  1. 01Lists available shadcn/ui components
  2. 02Retrieves component documentation
  3. 03Installs components into a project
  4. 04Lists and installs blocks
  5. 05Retrieves block documentation and code
  6. 06Detects the preferred package manager

Use cases

  1. 01Asking an AI assistant in the IDE to install shadcn/ui components
  2. 02Fetching block documentation and code through an MCP client
  3. 03Installing components in projects that use different package managers

MCP support

This is an MCP server that exposes shadcn/ui component and block lookup and installation as tools, such as list-components and install-component, to MCP clients.

#shadcn-ui#mcp-server#ide-integration#component-library

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-heilgar": {
      "command": "npx",
      "args": [
        "-y",
        "@heilgar/shadcn-ui-mcp-server"
      ]
    }
  }
}
Run commandnpx -y @heilgar/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
npm@heilgar/shadcn-ui-mcp-server

Tools

6

Saved tool list · updated 3w ago

This tool takes no parameters.

Details

From the project README

Shadcn UI MCP Server

A powerful and flexible MCP (Model Control Protocol) server designed to enhance the development experience with Shadcn UI components. This server provides a robust foundation for building and managing UI components with advanced tooling and functionality.

Shadcn UI Server MCP server

Features

Tools

The MCP server provides a set of tools that can be used through the Model Control Protocol:

  • list-components: Get the list of available shadcn/ui components
  • get-component-docs: Get documentation for a specific component
  • install-component: Install a shadcn/ui component
  • list-blocks: Get the list of available shadcn/ui blocks
  • get-block-docs: Get documentation for a specific block
  • install-blocks: Install a shadcn/ui block
Functionality

  • Component Management

    • List available shadcn/ui components
    • Get detailed documentation for specific components
    • Install components with support for multiple package managers (npm, pnpm, yarn, bun)

  • Block Management

    • List available shadcn/ui blocks
    • Get documentation and code for specific blocks
    • Install blocks with support for multiple package managers

  • Package Manager Support

    • Flexible runtime support for npm, pnpm, yarn, and bun
    • Automatic detection of user's preferred package manager

Installation

Prerequisites
  • Node.js (v18 or higher)
  • npm or yarn package manager
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

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}
Windsurf Configuration

Add this to your ./codeium/windsurf/model_config.json:

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}
Cursor Configuration

Add this to your .cursor/mcp.json:

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

Development and Debugging

Local Development
  1. Install dependencies:
npm install
  1. Build the server:
npm run build
Debugging

Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector for debugging:

npm run inspector

The Inspector will provide a URL to access debugging tools in your browser, allowing you to:

  • Monitor MCP communication
  • Inspect tool calls and responses
  • Debug server behavior
  • View real-time logs

Related Projects and Dependencies

This project is built using the following tools and libraries:

License

MIT License - feel free to use this project for your own purposes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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.