Skip to main content
Glama
krutikkkkkkkkk

shadcn MCP Server

by krutikkkkkkkkk
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Remote

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?"

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

Resources

New MCP Servers

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/krutikkkkkkkkk/shadcn-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server