shadcn/ui

listing.by

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

state.local.longlisting.badge.runs_with

listing.install

listing.local.explain

npx shadcn@latest mcp

listing.local.needs listing.local.note

act.add_to act.add_to

listing.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.

listing.can

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

listing.tools

listing.notools.local

listing.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

listing.setup.h

listing.setup.local

Claude Code

Run this in a terminal, in your project folder:

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

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

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

Claude Desktop

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

claude_desktop_config.json

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

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 a11y.new_tab

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

mcp.json

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

Needs Node.js on your computer.

VS Code

Install in VS Code a11y.new_tab

Or from a terminal:

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

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

Needs Node.js on your computer.

Devin Desktop

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

mcp_config.json

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

Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

Codex

codex mcp add shadcn -- npx shadcn@latest mcp

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

config.toml

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

Needs Node.js on your computer.

Gemini CLI

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:

{
  "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.

listing.faq

Can I paste mcp.tc/i/shadcn into my MCP client?

No. shadcn/ui runs on your own computer, started by your client, so it has no web address to connect to. The quick link is the page to share; the install command is npx shadcn@latest mcp.

Does shadcn/ui need an API key?

No. It doesn't declare any keys or environment variables. It runs with your user account's permissions, so check what its tools can reach.

Is shadcn/ui a remote or a local server?

Local. Your client starts it as a process on your computer with npx shadcn@latest mcp, which needs Node.js.

What can shadcn/ui do?

You can browse components available in configured registries, search registries for components by name or purpose and install components into the current project.

Which clients can use it?

Any client that starts local servers: Claude Code, Claude Desktop, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed and others. claude.ai and ChatGPT only connect to remote servers.

Who wrote this page?

mcp.tc's robot read shadcn/ui's public metadata (its package and repository pages), and an AI model drafted the text from it. A person reviews anything the checks can't confirm. The text can still be wrong, so if you spot a mistake, use Report this listing on this page.

listing.em.h

listing.em.lead_local listing.em.how

listing.em.badge

Markdown

[![shadcn/ui on mcp.tc](https://mcp.tc/i/shadcn/badge.svg)](https://mcp.tc/i/shadcn)

HTML

<a href="https://mcp.tc/i/shadcn"><img src="https://mcp.tc/i/shadcn/badge.svg" alt="shadcn/ui on mcp.tc" height="20"></a>

listing.em.badge_note

listing.em.widget

HTML

<script src="https://mcp.tc/w/shadcn.js" async></script>

listing.em.widget_note

iframe

HTML

<iframe src="https://mcp.tc/embed/shadcn" title="shadcn/ui on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

listing.em.iframe_note

JSON

listing.em.json_local

https://mcp.tc/i/shadcn.json

listing.em.fields

listing.disclaimer_checked

listing.install

listing.share.h

listing.about

listing.can

listing.tools

listing.prompts

listing.setup.h

Claude Code

Claude Desktop

Cursor

VS Code

Devin Desktop

Codex

Gemini CLI

Any client

listing.faq

listing.em.h

listing.em.badge

listing.em.widget

iframe

JSON

listing.related

Next.js DevToolsvf.sr

Angular CLIvf.sr

Laravel Boost

Nx

Spec Workflow MCP

Jupyter MCP Server