Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Hover Card
- Input
- Input OTP
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
The shadcn MCP server lets AI coding agents browse and install registry items for you. Point it at this registry and you can say "add the button and dialog components" and the agent runs the install.
Configure the registry
Add this registry to your project's components.json under registries:
{
"registries": {
"@shadcn-cssinjs": "https://shadcn-cssinjs.vercel.app/r/{name}.json"
}
}Add the MCP server
Run the shadcn MCP init command, or add the server manually:
$ pnpm dlx shadcn@latest mcp init --client claude
Use it
Once configured, prompt your agent naturally:
Show me the components available in the @shadcn-cssinjs registry.
Add the dialog and dropdown-menu components to my project.The agent reads each item's JSON, installs npm dependencies, and writes the source
into components/ui/ — the same result as running the CLI yourself.
The MCP server uses the registry config in components.json. Make sure the
@shadcn-cssinjs entry above is present before starting your agent.