krutikkkkkkkkk/shadcn-mcp-server

shadcn MCP Server

A Model Context Protocol server for shadcn/ui components. Helps AI assistants discover, install, and generate code for shadcn/ui components.

Installation

Option 1: Use with Claude Desktop (Recommended)

Add to your Claude Desktop claude_desktop_config.json:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn-mcp-server"]
    }
  }
}

Option 2: Clone and Run Locally

git clone https://github.com/krutikkkkkkkkk/shadcn-mcp-server.git
cd shadcn-mcp-server
npm install
npm run build
npm start

Option 3: Use with Any MCP Client

Install globally:

npm install -g shadcn-mcp-server

Then configure your MCP client to connect to shadcn-mcp-server.

Features

• List and search shadcn/ui components
• Get component details and dependencies
• Generate installation commands
• Create usage examples with proper imports

Available Tools

• list_shadcn_components - Browse available components
• get_component_info - Get component details
• generate_component_usage - Generate code examples
• get_installation_steps - Get installation instructions

Usage

Once installed, you can ask your AI assistant:

• "What shadcn components are available for forms?"
• "Show me how to use the button component"
• "How do I install the card and dialog components?"
• "Generate a complete form example with shadcn components"

The server will provide accurate information, installation commands, and code examples.

Example Conversation

You: "I need a modal dialog for my React app"

AI: Let me help you with the shadcn dialog component.

[Uses get_component_info and generate_component_usage tools]

AI: Here's how to install and use the Dialog component:

Installation:
npm install shadcn@latest add dialog

Usage:
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
    </DialogHeader>
    <p>Your dialog content here</p>
  </DialogContent>
</Dialog>

Supported Components (37 total)

Layout & Navigation: Accordion, Breadcrumb, Card, Carousel, Collapsible, Navigation Menu, Pagination, Separator, Sheet, Tabs

Forms & Input: Button, Checkbox, Form, Input, Label, Radio Group, Select, Slider, Switch, Textarea, Toggle, Toggle Group

Feedback & Overlays: Alert, Alert Dialog, Dialog, HoverCard, Popover, Progress, Toast, Tooltip

Data Display: Avatar, Badge, Calendar, Command, Skeleton, Table

Interaction: Context Menu, Dropdown Menu, Menubar, Scroll Area

For Developers

npm install
npm run dev

Development

• npm run build - Build TypeScript
• npm run dev - Run in development mode
• npm start - Run built server

Usage

Connect with any MCP client and ask:

• "What shadcn components are available?"
• "Show me how to use the button component"
• "How do I install the card and dialog components?"