组件
- 手风琴 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
- 空状态 Empty
- 字段 Field
- 表单 Form
- 悬停卡片 Hover Card
- 输入 Input
- 输入组 Input Group
- 一次性密码 OTP
- 条目 Item
- 快捷键 Kbd
- 标签 Label
- 菜单栏 Menubar
- 导航菜单 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
shadcn MCP 服务器 与任何兼容 shadcn 的注册表开箱即用。您无需做任何特别操作即可启用注册表的 MCP 支持。
先决条件
MCP 服务器通过请求您的注册表索引来工作。请确保您的注册表根目录下有一个名为 registry
的注册表条目文件。
例如,如果您的注册表托管在 https://acme.com/r/[name].json
,则您应当有一个文件位于 https://acme.com/r/registry.json
或 https://acme.com/r/registry
(如果您使用的是 JSON 文件扩展名)。
该文件必须是符合 注册表 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 代码编辑器,然后尝试以下提示:
- 显示 acme 注册表中的组件
- 使用 acme 注册表中的条目创建一个登录页
注意: 您可以在 Claude 代码编辑器中使用 /mcp
命令来调试 MCP 服务器。
您可以在 MCP 文档 中阅读更多关于 MCP 服务器的内容。
最佳实践
以下是 MCP 兼容注册表的一些最佳实践:
- 清晰描述:添加简洁且信息丰富的描述,帮助 AI 助手理解注册表条目的用途及用法。
- 正确的依赖:准确列出所有
dependencies
,以便 MCP 能够自动安装。 - 注册表依赖:使用
registryDependencies
表示条目间的关系。 - 统一命名:使用 kebab-case 命名组件,并保持整个注册表的一致性。
Deploy your shadcn/ui app on Vercel
Trusted by OpenAI, Sonos, Adobe, and more.
Vercel provides tools and infrastructure to deploy apps and features at scale.
Deploy to Vercel