本文档概述了 shadcn/ui 组件库、其组织结构以及可用的不同类型的 UI 组件。它涵盖了组件架构、注册表系统以及组件的分类和分发方式。
有关基于 CLI 的组件安装信息，请参阅 CLI 工具。有关主题和样式细节，请参阅 主题和样式。
shadcn/ui 组件系统采用分层架构，从基础图元到复杂组合。
来源: apps/www/registry/default/ui/sidebar.tsx1-774 apps/www/registry/new-york/ui/sidebar.tsx1-774 apps/www/public/r/styles/default/sidebar.json1-17
组件系统根据功能和复杂性分为不同的类别。
| 类别 | 目的 | 示例 | 文件模式 |
|---|---|---|---|
| 核心组件 | 基本交互元素 | Button、Input、Label | ui/button.tsx、ui/input.tsx |
| 布局组件 | 结构和导航 | Sidebar、Menubar | ui/sidebar.tsx、ui/menubar.tsx |
| 复杂组件 | 高级 UI 模式 | Dialog、Select、Tooltip | ui/dialog.tsx、ui/select.tsx |
| 表单组件 | 表单控件和输入 | Toggle Group、Switch | ui/toggle-group.tsx |
| 实用组件 | 辅助和增强 | Separator、Skeleton | ui/separator.tsx |
来源: apps/v4/registry/new-york-v4/ui/button.tsx7-36 apps/www/public/r/styles/new-york-v4/button.json1-15
注册表系统通过 JSON 配置文件和 TypeScript 实现来管理组件分发和元数据。
每个组件的注册表条目都遵循标准化的模式，定义了依赖项和元数据。
来源: apps/www/public/r/styles/new-york/sidebar.json1-19 apps/www/public/r/styles/default/select.json1-17
组件具有两种由注册表系统管理的依赖项类型：
组件需要的第三方包
@radix-ui/react-* - 关注可访问性的图元class-variance-authority - 变体管理lucide-react - 图标库其他组件依赖的内部 shadcn/ui 组件
来源: apps/www/public/r/styles/new-york/sidebar.json10-18 apps/www/public/r/styles/new-york/select.json6-8
组件通过 class-variance-authority 模式支持多种视觉变体。
组件通常使用 cva() 函数实现变体。
每种样式变体（default、new-york、new-york-v4）都提供了不同的视觉效果，同时保持相同的组件 API。
来源: apps/v4/registry/new-york-v4/ui/button.tsx7-36 apps/www/registry/new-york/ui/select.tsx15-33
组件块是预构建的组合，将多个组件结合成更大的 UI 模式。
| 块类型 | 示例 | 注册表模式 |
|---|---|---|
| 侧边栏变体 | sidebar-09、sidebar-16 | 类型为 registry:block |
| 导航模式 | 头部组合 | 复杂组合 |
| 布局模板 | 仪表盘布局 | 多组件设置 |
块包含完整的页面实现和组件组合。
来源: apps/www/public/r/styles/new-york/sidebar-09.json1-26 apps/www/public/r/styles/new-york-v4/sidebar-09.json1-20