组件
- 手风琴 (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)
- OTP 输入框 (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)
开源 Registry 索引是一份清单,列出了所有可以开箱即用的开源 Registry。
当你运行 shadcn add 或 shadcn search 时,CLI 会自动在 Registry 索引中查找你需要的 Registry,并将其添加到你的 components.json 文件中。
你可以在 https://ui.shadcn.org.cn/r/registries.json 查看完整列表。
添加 Registry
- 将你的 Registry 添加到
apps/v4/registry/directory.json中 - 运行
pnpm registry:build以更新registries.json文件。 - 向 https://github.com/shadcn-ui/ui 提交拉取请求(Pull Request)
提交请求后,团队将对你的请求进行验证和审核。
要求
- 该 Registry 必须是开源且可公开访问的。
- 该 Registry 必须是一个符合 Registry 模式规范 的有效 JSON 文件。
- Registry 应为扁平化结构,不包含嵌套项,即
/registry.json和/component-name.json文件应位于 Registry 的根目录下。 - 如果存在
files数组,则不得包含content属性。
以下是一个有效的 Registry 示例
{
"$schema": "https://ui.shadcn.org.cn/schema/registry.json",
"name": "acme",
"homepage": "https://acme.com",
"items": [
{
"name": "login-form",
"type": "registry:component",
"title": "Login Form",
"description": "A login form component.",
"files": [
{
"path": "registry/new-york/auth/login-form.tsx",
"type": "registry:component"
}
]
},
{
"name": "example-login-form",
"type": "registry:component",
"title": "Example Login Form",
"description": "An example showing how to use the login form component.",
"files": [
{
"path": "registry/new-york/examples/example-login-form.tsx",
"type": "registry:component"
}
]
}
}
]
}