# shadcn/ui MCP server

> Browse, search and install shadcn/ui components and other registry components into your project from your assistant.

- Listing: https://mcp.tc/i/shadcn
- Connect: this is a local (stdio) server; install it on your machine (see Install). The listing link is a page, not an MCP endpoint.
- Type: local (stdio)
- Auth: no API key needed
- Category: [Developer Tools](https://mcp.tc/c/developer-tools)
- Vendor: shadcn
- Homepage: <https://ui.shadcn.com/docs/mcp>
- Repository: <https://github.com/shadcn-ui/ui>
- Package: npm `shadcn`

## About

Connects your assistant to shadcn/ui and other component registries. It can browse and search available components and add them to your project, with required dependencies installed by the shadcn CLI.

Runs locally over stdio through the shadcn npm package with npx shadcn@latest mcp. No sign-in or API key is needed. Running npx shadcn@latest mcp init --client claude writes the client configuration for Claude.

## What it can do

- Browse components available in configured registries
- Search registries for components by name or purpose
- Install components into the current project
- Work with shadcn/ui and other component registries

## Example prompts

- "Show me the components available in the shadcn/ui registry"
- "Add the alert-dialog component to my project"
- "Search the registry for a date picker component"
- "Install a login form block from shadcn/ui"

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport stdio shadcn -- npx shadcn@latest mcp
```

2. Start Claude Code and type `/mcp`. **shadcn** should show as connected.

Add `--scope user` to make it available in every project.

### Claude Desktop

1. Open **Settings → Developer → Edit Config**. It opens `claude_desktop_config.json`. Add:

`claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}
```

2. Save the file and restart Claude Desktop.

Needs Node.js on your computer. The file lives in `~/Library/Application Support/Claude/` on macOS and `%APPDATA%\Claude\` on Windows.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=shadcn&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJzaGFkY25AbGF0ZXN0IiwibWNwIl19>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

```json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}
```

Needs Node.js on your computer.

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=shadcn&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22shadcn%40latest%22%2C%22mcp%22%5D%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"shadcn","type":"stdio","command":"npx","args":["shadcn@latest","mcp"]}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "shadcn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}
```

Needs Node.js on your computer.

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

```json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}
```

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

### Codex

```bash
codex mcp add shadcn -- npx shadcn@latest mcp
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]
```

Needs Node.js on your computer.

### Gemini CLI

```bash
gemini mcp add shadcn npx shadcn@latest mcp
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients that start local servers accept this shape:

```json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}
```

Zed puts servers under `context_servers` in its settings, with the same `command`, `args` and `env` fields.

Needs Node.js on your computer.

## Details

- Server version: 4.21.1
- Last checked: 2026-10-03
- Listed: 2026-10-03
- Updated: 2026-10-03

---
Source: https://mcp.tc/i/shadcn (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report