shadcn/ui MCP Server

You need a command palette for your app. You know shadcn/ui has one, but you cannot remember the exact component name, which dependencies it pulls in, or how to customize it for your project’s theme. So you open the docs, search for “command,” find the component, read the installation instructions, copy the install command, run it, read the usage docs, and start adapting the examples to your codebase. Fifteen minutes of docs browsing before you write a single line of application code.

The shadcn/ui MCP server brings the entire component registry into your AI’s context. The AI searches components, reads their documentation, checks examples, and generates the installation command — all in one conversation. You describe what you need, and the AI handles the rest.

What You’ll Walk Away With

• Setup for the official shadcn/ui MCP server across all three tools
• Prompts for component discovery, installation, and customization
• Understanding of registry support (React, Svelte, Vue, React Native)
• Strategies for combining shadcn/ui MCP with Figma MCP for design-to-code workflows

Setup

The official shadcn MCP server is maintained by the shadcn team and provides access to the component registry, documentation, and examples.

Cursor

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

Claude Code

The shadcn MCP server is available as a built-in profile:

claude mcp add shadcn -- npx shadcn@latest mcp

Or add to .claude/settings.json:

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

Codex

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

Available Tools

The shadcn MCP server exposes tools for navigating and using the component ecosystem:

Tool	What It Does
list_items_in_registries	Lists all available components, blocks, and hooks
search_items_in_registries	Searches components by name or description
view_items_in_registries	Shows full documentation for a specific component
get_item_examples_from_registries	Retrieves usage examples for a component
get_add_command_for_items	Generates the correct npx shadcn add command
get_audit_checklist	Returns best practices checklist for shadcn/ui usage

Component Discovery and Installation

Tip

Copy-paste prompt for component discovery:

“Search the shadcn/ui registry for components related to data display. List all matching components with a brief description of each. Then show me the full documentation and examples for the DataTable component, including its dependencies.”

Tip

Copy-paste prompt for installation:

“I need a dialog for confirming destructive actions and a toast notification system. Search the shadcn/ui registry for the right components, show me what each one looks like from the examples, and then give me the install commands for all of them. Also check if any of these components are already installed in my project.”

Building with shadcn/ui Components

The real value is not just installing components — it is having the AI build complete features using shadcn/ui patterns correctly.

Tip

Copy-paste prompt for feature implementation:

“Use the shadcn/ui MCP server to look up the Dialog, Form, Input, and Select components. Then build a user settings form at src/components/settings-form.tsx that uses these components. The form should have fields for name, email, timezone (select), and notification preferences (switch). Use react-hook-form with zod validation as shown in the shadcn Form documentation.”

Multi-Framework Support

The shadcn MCP server supports registries beyond React:

Registry	Framework	Components
shadcn/ui	React + Tailwind	Full component library
shadcn-svelte	Svelte + Tailwind	Svelte port of shadcn components
shadcn-vue	Vue + Tailwind	Vue port of shadcn components
react-native-reusables	React Native	Mobile-adapted components

When using multi-framework registries, specify the registry in your prompts: “Search the shadcn-svelte registry for a DatePicker component.”

Combining shadcn/ui MCP with Figma MCP

The most powerful design-to-code workflow combines Figma MCP with shadcn/ui MCP. The AI reads the design from Figma, identifies which shadcn/ui components match the design patterns, and generates implementation code that uses the correct components with proper customization.

Tip

Copy-paste prompt for design-to-component mapping:

“Look at my current Figma selection. Identify which shadcn/ui components would be needed to implement this design. For each identified component, use the shadcn MCP server to get the documentation and examples. Then implement the full component using shadcn/ui components with the exact colors and spacing from the Figma design.”

The Audit Checklist

The shadcn MCP server includes a get_audit_checklist tool that returns best practices for using shadcn/ui in your project. This is useful for code review or when onboarding new team members to the design system.

Tip

Copy-paste prompt for design system audit:

“Get the shadcn/ui audit checklist. Then scan the components in src/components/ui/ and check each one against the checklist. Flag any components that deviate from recommended patterns and suggest corrections.”

When This Breaks

“Command not found” for shadcn CLI. The MCP server generates npx shadcn add commands, which require the shadcn CLI. If you have not initialized shadcn in your project, run npx shadcn init first.

Components install but do not render. Check that your Tailwind CSS configuration includes the shadcn preset and that your components.json file points to the correct paths. The MCP server generates commands based on the default configuration.

Wrong framework detected. If the AI generates React code for a Svelte project, be explicit about your framework in the prompt: “I am using shadcn-svelte, not the React version.”

Outdated component examples. The MCP server fetches from the live registry, so examples are current. But if you installed a component months ago, your local version may be behind the registry. Run npx shadcn diff to check for updates.

What’s Next

Figma MCP Connect Figma designs directly to your shadcn/ui implementation.

Documentation Context Keep your AI grounded in current library documentation.