组件
- 手风琴 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 add
或 shadcn search
时,CLI 会自动检查你所查找的注册表索引,并将其添加到你的 components.json
文件中。
你可以在 https://ui.shadcn.com/r/registries.json 查看完整列表。
添加注册表
你可以通过提交 PR 来向索引中添加注册表,只需将其添加到 registries.json 文件中。
下面是向索引中添加注册表的示例:
{
"@acme": "https://registry.acme.com/r/{name}.json",
"@example": "https://example.com/r/{name}"
}
要求
- 注册表必须是开源的且公开可访问。
- 注册表必须是符合 registry schema specification 的有效 JSON 文件。
- 注册表预计为扁平结构,不包含嵌套项,即
/registry.json
和/component-name.json
文件应位于注册表根目录。 - 如果存在
files
数组,其内容不得包含content
属性。
这是一个有效注册表的示例:
{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"name": "acme",
"homepage": "https://acme.com",
"items": [
{
"name": "login-form",
"type": "registry:component",
"title": "登录表单",
"description": "一个登录表单组件。",
"files": [
{
"path": "registry/new-york/auth/login-form.tsx",
"type": "registry:component"
}
]
},
{
"name": "example-login-form",
"type": "registry:component",
"title": "登录表单示例",
"description": "展示如何使用登录表单组件的示例。",
"files": [
{
"path": "registry/new-york/examples/example-login-form.tsx",
"type": "registry:component"
}
]
}
}
]
}
验证
在 shadcn/ui
项目的根目录,你可以运行以下命令来验证 registries.json
文件。
pnpm validate:registries
该命令会验证 registries.json
文件并输出任何错误。
提交 PR 后,它将由团队进行验证和审核。
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