home / mcp / shadcn ui mcp server

Shadcn UI MCP Server

Provides an MCP server to manage shadcn/ui components and blocks with multi-package-manager support.

Installation

Add the following to your MCP client configuration file.

Configuration

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

You run a Shadcn UI MCP Server to manage and interact with shadcn/ui components through the Model Control Protocol. It lets you discover components and blocks, read their docs, and install them across multiple package managers, all via a unified MCP interface.

How to use

You interact with the server using an MCP client to list available components, view documentation, and install what you need. You can also query available blocks, read their docs, and install blocks just like components. The server automatically supports npm, pnpm, yarn, and bun, and it can detect your preferred package manager when performing installations.

How to install

Prerequisites: ensure you have Node.js v18 or higher and a package manager installed (npm or yarn is fine). You will run the MCP server via a standard Node-based CLI approach.

npm install
npm run build

Configuration and usage notes

You can connect to the MCP server using standard JSON configuration snippets. The server is intended to run locally via a simple CLI invocation and can be configured for different environments by providing the MCP server entry under a unique name.

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

Environment and debugging

During development and debugging, you can run a dedicated inspector to monitor MCP traffic, tool calls, and logs. This helps you verify component and block operations and diagnose issues as you install or query resources.

npm run inspector

Tool access and actions

The server provides a set of actions you can perform via MCP calls. These include listing components, retrieving component docs, installing components, listing blocks, getting block docs, and installing blocks.

Example use patterns

- List available components to see what you can install. - Get documentation for a specific component to understand usage and props. - Install a component with your preferred package manager. - Do the same for blocks to extend UI capabilities.

Available tools

list-components

Retrieve the list of available shadcn/ui components.

get-component-docs

Fetch documentation for a specific component.

install-component

Install a shadcn/ui component into your project.

list-blocks

Retrieve the list of available shadcn/ui blocks.

get-block-docs

Fetch documentation for a specific block.

install-blocks

Install blocks into your project.