Get Started
组件
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Form
- Hover Card
- Input Group
- Input OTP
- Input
- 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 Group
- Toggle
- Tooltip
- Typography
shadcn MCP 服务 可直接搭配任意兼容 shadcn 的注册表使用,无需额外配置即可启用。
前置条件
MCP 服务会读取注册表索引,请确保在注册表根路径提供名为 registry 的条目文件。
例如,若注册表托管在 https://acme.com/r/[name].json,那么应同时提供 https://acme.com/r/registry.json(或不带扩展名的 https://acme.com/r/registry)。
该文件必须是符合 registry Schema 的合法 JSON。
配置 MCP
提示注册表使用者在项目的 components.json 中添加你的注册表,并安装 shadcn MCP 服务:
在 components.json 中配置注册表:
{
"registries": {
"@acme": "https://acme.com/r/{name}.json"
}
}在项目中执行下面的命令:
pnpm dlx shadcn@latest mcp init --client claude
重启 Claude Code,尝试以下提示语:
- Show me the components in the acme registry
- Create a landing page using items from the acme registry
提示: 可在 Claude Code 中使用 /mcp 调试 MCP 服务。
更多内容可参考 MCP 文档。
最佳实践
针对支持 MCP 的注册表,建议遵循以下规范:
- 描述清晰:提供简洁且信息量充足的描述,帮助 AI 助手理解条目用途。
- 依赖准确:完整列出
dependencies,便于 MCP 自动安装。 - 声明依赖关系:使用
registryDependencies表达条目之间的关联。 - 命名一致:组件名称统一使用 kebab-case,保持注册表风格一致。