shadcn MCP Server Guide 2026: Build UI From Claude and Cursor

Table of Contents

1. What Is the shadcn MCP Server?
2. Why a Component MCP Changes Frontend Work
3. The Official shadcn MCP
4. Alternatives and Companions
5. Quick Comparison Table
6. Setup: Adding the shadcn MCP to Claude and Cursor
7. A Real Workflow: Building a Dashboard
8. Tips for Getting Clean Output
9. Frequently Asked Questions

What Is the shadcn MCP Server?

shadcn/ui is the most popular way to build React interfaces in 2026: instead of installing a component library as a dependency, you copy beautifully designed, accessible components straight into your codebase, where you own and can edit them. The shadcn MCP server brings that workflow to AI clients.

Shipped as a subcommand of the shadcn CLI, the MCP exposes three core capabilities to your assistant: browse the available components in a registry, view the real source and demos for any component, and add a component to your project with its dependencies and Tailwind wiring done correctly. You start it with a single command:

npx shadcn@latest mcp

The key word is real. Before MCP, asking a model for a shadcn dialog produced plausible-looking code that quietly drifted from the current API. With the MCP, the assistant fetches the actual registry source for the version you use, so what lands in your repo is correct by construction.

Why a Component MCP Changes Frontend Work

The hardest part of AI-assisted UI work has never been generating markup, it is generating markup that matches the library you actually use. Models trained months ago invent props, import from the wrong paths, and reach for deprecated patterns. A component MCP closes that gap by making the registry the source of truth instead of the model's memory.

That shift has three practical effects. First, fewer hallucinated APIs: the component code is fetched, not imagined. Second, correct installs: the MCP runs the real add command, so dependencies, components.json, and Tailwind config stay consistent. Third, design-system enforcement: point the MCP at your private registry and the AI installs your approved components, not random public ones. For teams, that last point is the difference between AI that speeds you up and AI that quietly erodes your design system.

The Official shadcn MCP

The official server is the one to start with. Because it is part of the CLI you already use, there is no separate package to trust, and it tracks the registry configuration in your project automatically. It handles the full loop: discover a component, read its source and demo, then add it. It also supports custom and private registries, which is how design-system teams expose internal components to the assistant.

Best for: Anyone building with shadcn/ui in React. This is the default pick.

Install: npx shadcn@latest mcp, then configure your client to launch it (see setup below).

Alternatives and Companions

The official MCP covers installation. These companions cover generation and discovery, and many teams run one alongside it.

1. 21st.dev Magic MCP

Magic MCP generates polished UI components from a natural-language description and can pull from a large catalog of shadcn-style components. Where the official MCP installs known components, Magic helps you invent new ones that still match the shadcn aesthetic. It has a free tier plus paid plans for heavier use.

Best for: Greenfield UI where you want generated, on-brand components fast.

2. shadcn Registry MCP

A thin server focused purely on registry browsing and resolution, useful when you maintain multiple registries (public plus internal) and want the assistant to search across them. Pairs well with the official MCP rather than replacing it.

Best for: Teams running custom registries who want richer discovery.

3. shadcn-ui Component MCP

Community servers (such as the widely used shadcn-ui MCP) expose component source and demos with extra metadata, and several extend coverage to Figma handoff or framework ports like shadcn-vue and shadcn-svelte. Reach for one when you work outside React or want Figma-to-component context in the same conversation.

Best for: Non-React stacks and design-to-code workflows.

Quick Comparison Table

Setup: Adding the shadcn MCP to Claude and Cursor

In Claude Code, add it from the CLI:

claude mcp add shadcn -- npx shadcn@latest mcp

In Claude Desktop, edit your config:

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

In Cursor, open the MCP settings panel and add a server with the same npx shadcn@latest mcp command. Cursor is the most common host for this MCP because component work happens in the editor, next to the files being changed. The Skiln Config Generator can output this alongside the rest of your frontend stack, including Playwright for visual checks and Context7 for up-to-date library docs.

A Real Workflow: Building a Dashboard

Here is how the MCP feels in practice when you build a settings dashboard:

1. Ask for the shell. "Browse the shadcn registry and add a card, tabs, and a data table." The MCP fetches each component's real source and runs the add commands.
2. Compose, do not copy-paste. Claude assembles the imported components into a layout using the actual props from the fetched source, so no invented APIs.
3. Pull docs when stuck. With Context7 connected, the assistant checks the current Tailwind or React Hook Form docs instead of guessing.
4. Verify visually. With the Playwright MCP connected, ask Claude to open the page and screenshot it, then iterate on spacing and states from what it actually sees.

The result is a dashboard built from real components, wired correctly, and visually confirmed, without you leaving the editor. This is exactly the stack we recommend in our guide to the best MCP servers for frontend developers.

Tips for Getting Clean Output

• Name the component, not the look. "Add the shadcn dialog" beats "add a popup." The MCP resolves exact registry names.
• Let the MCP install, not the model. If the assistant tries to hand-write a component that exists in the registry, redirect it to fetch and add instead. Fetched beats imagined every time.
• Point it at your registry. For teams, configure a private registry so the AI installs your design-system components by default.
• Review the diff. shadcn copies source into your repo. Treat every add like a code change and read what landed before committing.
• Pair with a docs MCP. Context7 keeps the assistant current on the libraries shadcn components depend on, which cuts down on version drift.

Frequently Asked Questions

What is the shadcn MCP server?

The shadcn MCP server is a Model Context Protocol server, shipped with the shadcn CLI, that lets an AI client browse, read, and install components from shadcn/ui and any compatible registry. Instead of hallucinating component code, the assistant pulls the real, current source for a component and adds it to your project with the correct dependencies. You run it with npx shadcn@latest mcp.

How is the shadcn MCP different from just asking Claude for a component?

Without the MCP, the model writes component code from memory, which drifts from the current shadcn API and often invents props that do not exist. With the MCP, the assistant fetches the actual registry source for the component you want, so what lands in your project matches the real library version. It also runs the proper add command so dependencies and Tailwind config are wired correctly.

Does the shadcn MCP work with frameworks other than React?

shadcn/ui itself is React-first, but the registry model and several community MCPs extend coverage to Vue (shadcn-vue), Svelte (shadcn-svelte), and other ports. If you work outside React, check that the specific MCP you pick lists your framework's registry. The official CLI MCP follows whatever registries you configure.

Can the shadcn MCP use private or custom component registries?

Yes. shadcn's registry system supports custom and private registries, and the MCP respects your project's registry configuration. Teams use this to expose an internal design-system registry so the AI installs your approved, branded components instead of the public defaults.

Do I need Cursor, or does it work in Claude Code too?

It works anywhere MCP works. The shadcn MCP runs in Claude Desktop, Claude Code, Cursor, Windsurf, Cline, and Zed. Cursor and Claude Code are the most common hosts because component work usually happens inside an editor, but the protocol is identical across clients.

Will the shadcn MCP overwrite my customized components?

shadcn copies component source into your repo, so once you customize a component it is yours. The MCP adds new components and can show you the latest upstream source, but you stay in control of whether to overwrite. Treat any re-add like a manual merge and review the diff before committing.

Is the shadcn MCP free?

Yes. The shadcn CLI and its MCP are free and open source. Companion tools like 21st.dev Magic MCP have free tiers plus paid plans for higher generation limits, but the core shadcn component workflow costs nothing beyond your AI client subscription.

Where can I find other frontend MCP servers?

Skiln indexes shadcn, Figma, Playwright, Chrome DevTools, and other frontend MCPs alongside 75,000+ servers, skills, and agents. Start with our roundup of the best MCP servers for frontend developers, or browse the full directory at /browse.

Last updated: June 19, 2026 · Skiln tracks MCP server releases daily across 13 source registries.