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
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- 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
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Get Started
shadcn MCP server 可直接与任何兼容 shadcn 的注册库协作。你不需要做任何额外操作来为你的注册库启用 MCP 支持。
前置条件
MCP server 会通过请求你的注册库索引来工作。请确保你的注册库根目录下有一个名为 registry 的注册库条目文件。
例如,如果你的注册库托管在 https://acme.com/r/[name].json,那么你应该有一个文件位于 https://acme.com/r/registry.json;如果你使用 JSON 文件扩展名,也可以是 https://acme.com/r/registry。
这个文件必须是一个有效的 JSON 文件,并符合 registry schema。
配置 MCP
让你的注册库使用者在他们的 components.json 文件中配置你的注册库,并安装 shadcn MCP server:
在你的 components.json 文件中配置注册库:
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}在你的项目中运行以下命令:
pnpm dlx shadcn@latest mcp init --client claude
重启 Claude Code,然后尝试以下提示:
- 显示 acme 注册库中的组件
- 使用 acme 注册库中的条目创建一个落地页
注意: 你可以在 Claude Code 中使用 /mcp 命令来调试 MCP server。
你可以在 MCP documentation 中阅读更多关于 MCP server 的内容。
最佳实践
以下是针对 MCP 兼容注册库的一些最佳实践:
- 清晰的描述:添加简洁、信息明确的描述,帮助 AI 助手理解一个注册库条目是做什么的,以及如何使用它。
- 正确的依赖:准确列出所有
dependencies,这样 MCP 就能自动安装它们。 - 注册库依赖:使用
registryDependencies来表示条目之间的关系。 - 一致的命名:组件名称使用 kebab-case,并在整个注册库中保持一致。