Shadcn UI MCP Server

Official shadcn MCP server that lets AI assistants browse, view, and install shadcn/ui components, blocks, and demos from configured registries.

Developer Tools by shadcn None active

GitHub Docs npm: shadcn

Overview

The shadcn MCP Server is the official Model Context Protocol integration shipped with the shadcn CLI (v3+). It acts as a bridge between your AI coding assistant and any shadcn-compatible component registry, including the public shadcn/ui registry, private team registries, and third-party namespaced registries configured in your project's components.json. With it, agents can discover available components, read their source code and demos, and install them into the current project using the standard shadcn add workflow.

Capabilities are exposed through seven MCP tools that map directly to shadcn CLI primitives: listing registries, enumerating and fuzzy-searching items, viewing full source files, pulling usage examples and demos, generating the exact add command, and producing an audit checklist for verifying installs. Because the server is started locally via npx shadcn@latest mcp, it inherits the project's own components.json settings, framework choice (React, Svelte, Vue, React Native), and Tailwind version.

This is the canonical, maintained-by-shadcn implementation and replaces earlier community MCP servers for shadcn/ui. It works out of the box with Claude Code, Cursor, and VS Code (GitHub Copilot), and supports authenticated private registries via per-registry headers and environment-variable substitution.

Tools

Tool	Description
`shadcn:get_project_registries`	Returns the registry names configured in the project's components.json.
`shadcn:list_items_in_registries`	Enumerates all items available in one or more registries.
`shadcn:search_items_in_registries`	Fuzzy search across registries by title/name.
`shadcn:view_items_in_registries`	Returns full item details, including complete file contents and dependencies.
`shadcn:get_item_examples_from_registries`	Finds usage examples and demos matching a query, returning their full implementation code.
`shadcn:get_add_command_for_items`	Generates the exact `shadcn add` CLI command for the requested items.
`shadcn:get_audit_checklist`	Returns a verification checklist the agent should run after installing components.

Setup Guide

Prerequisites

Node.js with npx (or pnpm dlx) available
A project with a components.json file (run npx shadcn@latest init if you don't have one)
An MCP client: Claude Code, Cursor, or VS Code with GitHub Copilot

One-command setup

Run the init command for your client from the project root:

# Claude Code
pnpm dlx shadcn@latest mcp init --client claude

# Cursor
pnpm dlx shadcn@latest mcp init --client cursor

# VS Code
pnpm dlx shadcn@latest mcp init --client vscode

Manual configuration

Claude Code (`.mcp.json`) and Cursor (`.cursor/mcp.json`)

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

VS Code (`.vscode/mcp.json`)

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

Configuring registries

Registries are declared in your project's components.json. The default @shadcn registry is always available. To add others:

{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": {
      "url": "https://internal.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

Restart your MCP client after editing config or components.json.

Use Cases

Scaffold a feature by asking the agent to compose UI from existing shadcn primitives (e.g. "Build a settings page using card, tabs, switch, and button from @shadcn").
Search a private design-system registry for the right pre-approved component instead of writing a one-off.
Pull a known demo (e.g. accordion-demo) with full source to use as the starting template for a new screen.
Have the agent emit the exact npx shadcn@latest add ... command so installs match the project's framework and Tailwind config.
Audit a generated component against shadcn's verification checklist before opening a PR.

Example Prompts

"List all components available in the @shadcn registry."
"Find me a login form demo from the shadcn registry and add the necessary components to my project."
"Show me the full source of @shadcn/data-table and its dependencies."
"Build a pricing section using components from the @acme registry."
"Give me the exact add command to install button, dialog, and form."

Pros

Official implementation maintained by shadcn and shipped inside the shadcn CLI, so it always tracks the current registry format.
Works with any shadcn-compatible registry, including private and namespaced registries with header-based auth.
Framework-aware: respects the project's components.json, so installs match React, Svelte, Vue, or React Native setup.
Built-in audit checklist tool encourages agents to verify generated code before finishing.

Limitations

Requires a project with components.json already configured; not useful as a global "look up shadcn docs" server.
Tools cover registry operations only; there is no MCP equivalent for project-level config like aliases or Tailwind version (use npx shadcn@latest info).
Newer offering (shadcn CLI 3.0, August 2025), so some community guides still reference older third-party shadcn MCP servers.

Alternatives

Jpisnice/shadcn-ui-mcp-server: popular community MCP for shadcn/ui with React, Svelte, Vue, and React Native variants.
heilgar/shadcn-ui-mcp-server: alternative community server focused on component reference lookup.
21st.dev Magic MCP: generates UI components (including shadcn-style) from natural-language prompts.