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
Prompt | Without MCP | With MCP |
---|---|---|
"How do I customize the color picker component?" | Generic HTML5 color input or random npm packages | Exact color picker from shadcn.io registry with proper form integration |
"Show me button variants" | Maybe mentions primary/secondary if you're lucky | All 6 actual variants with real examples |
"I need a data table with sorting" | Generic table tutorials | The actual Data Table component with working sort/filter patterns |
Shadcn MCP for Claude Code
Learn how to install Shadcn MCP for Claude Code. Connect your AI frontend development workflow to shadcn/ui components using MCP servers for smarter coding assistance.
Shadcn MCP for Windsurf
Learn how to install Shadcn MCP for Windsurf. Connect your AI-powered editor to shadcn/ui components using MCP servers for smarter coding assistance.