- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- React Hook Form
- Hover Card
- Input
- Input OTP
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
The shadcn MCP server works out of the box with any shadcn-compatible registry. You do not need to do anything special to enable MCP support for your registry.
Prerequisites
The MCP server works by requesting your registry index. Make sure you have a registry item file at the root of your registry named registry
.
For example, if your registry is hosted at https://acme.com/r/[name].json
, you should have a file at https://acme.com/r/registry.json
or https://acme.com/r/registry
if you're using a JSON file extension.
This file must be a valid JSON file that conforms to the registry schema.
Configuring MCP
Ask your registry consumers to configure your registry in their components.json
file and install the shadcn MCP server:
Configure your registry in your components.json
file:
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}
Run the following command in your project:
pnpm dlx shadcn@latest mcp init --client claude
Restart Claude Code and try the following prompts:
- Show me the components in the acme registry
- Create a landing page using items from the acme registry
Note: You can use /mcp
command in Claude Code to debug the MCP server.
You can read more about the MCP server in the MCP documentation.
Best Practices
Here are some best practices for MCP-compatible registries:
- Clear Descriptions: Add concise, informative descriptions that help AI assistants understand what a registry item is for and how to use it.
- Proper Dependencies: List all
dependencies
accurately so MCP can install them automatically. - Registry Dependencies: Use
registryDependencies
to indicate relationships between items. - Consistent Naming: Use kebab-case for component names and maintain consistency across your registry.