How to install Shadcn MCP for Claude Code

Look, if you're here, you probably already know that Claude Code is pretty solid for terminal-based development. But here's the thing—when you ask it about shadcn/ui components, it's been flying blind, working off whatever it remembered from training instead of actual, current component data.

That's where MCP (Model Context Protocol) comes in. Think of it as giving Claude Code a direct line to the shadcn/ui component registry and the entire shadcn.io community ecosystem. No more "this might be outdated" disclaimers.

Your first 5 minutes with Shadcn MCP

claude mcp add --transport http shadcn https://www.shadcn.io/api/mcp

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://www.shadcn.io/api/mcp"]
    }
  }
}

use shadcn to give me a list of all components available

use shadcn and give me information about color picker component

use shadcn and implement the color picker component in my app

That's it. Four simple steps and Claude Code now has access to the entire shadcn/ui component registry and the custom shadcn.io components and utilities.

What is Claude Code anyway?

If you're new to Claude Code, it's Anthropic's official CLI. Think of it as ChatGPT but built for developers who live in the terminal. It can read your files, edit code, run commands, and now—with MCP—tap into external knowledge like component libraries.

The killer feature? It understands your entire codebase context, not just individual files. Add MCP servers and suddenly it's not just context-aware, it's ecosystem-aware.

What this actually gets you