Join our Discord Community

Shadcn MCP for Cursor

Learn how to install Shadcn MCP for Cursor. Connect your AI-first editor to shadcn/ui components using MCP servers for smarter coding assistance.

Issues setting up the MCP in Cursor?

Join our Discord community for help from other developers.


How to install Shadcn MCP for Cursor

Look, if you're here, you probably already know that Cursor is the go-to AI-first editor for most developers. 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 Cursor 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

Install the MCP server

Add this to your ~/.cursor/mcp.json file:

{
  "mcpServers": {
    "shadcn": {
      "url": "https://www.shadcn.io/api/mcp"
    }
  }
}

This connects Cursor to the entire shadcn/ui component registry. Takes about 10 seconds.


Explore available components

use shadcn to give me a list of all components available

Watch Cursor pull up-to-date component information directly from the registry. No guessing, no outdated docs—just current component data.


Get component details

use shadcn and give me information about color picker component

Cursor can now see actual component implementations, props, and usage patterns. Real information about how components actually work.


Implement in your project

use shadcn and implement the color picker component in my app

Get working code that follows shadcn/ui patterns. Cursor understands your component system and suggests code that actually works.

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

What is Cursor anyway?

If you're new to Cursor, it's basically VS Code rebuilt for AI-assisted coding. Think of it as your familiar editor but with AI baked into every part of the workflow. The killer feature? It understands your entire codebase context while you're coding.

What this actually gets you

PromptWithout MCPWith MCP
"How do I customize the color picker component?"Generic HTML5 color input or random npm packagesExact color picker from shadcn.io registry with proper form integration
"Show me button variants"Maybe mentions primary/secondary if you're luckyAll 6 actual variants with real examples
"I need a data table with sorting"Generic table tutorialsThe actual Data Table component with working sort/filter patterns