Shadcn-UI 完整组件演示
开源项目 GitHub 地址： https://github.com/shadcn-ui/ui
概述
本文档为基于 shadcn-ui 构建的组件演示项目的技术说明。shadcn-ui 提供了一套可复用的 React 组件集合，支持无障碍访问（A11y），允许开发者将组件代码直接集成至项目中。
在本次演示项目中，我们通过执行 npx shadcn@latest add --all 命令，完整安装了该生态下的全部 55 个核心组件，并在单一页面中按照逻辑分类进行了结构化渲染与交互验证。
组件分类
本演示项目在页面中构建了 8 个主要区块。以下是实际安装的 55 个组件在各个区块中的严格分布与功能说明：
1. 警告与反馈系统 (Alerts & Feedback)
涵盖系统状态反馈与加载占位相关的组件：
-
Alert：系统提示与警告框
-
Skeleton：内容加载占位骨架屏
-
Progress：任务进度条指示器
-
Badge：状态或属性标记徽章
2. 导航与菜单 (Navigation)
实现应用内路由跳转与层级导航的核心组件：
-
Breadcrumb：页面层级路径指示
-
Menubar：桌面端风格顶部菜单栏
-
Navigation Menu：多层级导航菜单
-
Sidebar：侧边栏布局控件
3. 数据展示 (Data Display)
用于结构化数据呈现与页面基础容器：
-
Table：数据表格
-
Separator：内容分隔线
-
Carousel：内容轮播控件
-
Card：基础内容容器
-
Empty：数据空状态占位
4. 复杂表单元素
构建数据录入表单的基础交互组件：
-
Button：按钮与触发器
-
Input：单行文本输入框
-
Select：自定义下拉选择器
-
Checkbox：复选框控件
-
Textarea：多行文本域
-
Radio Group：单选框组合
-
Toggle：双状态切换按钮
-
Label：表单关联标签
-
Field：表单字段级封装控件
-
Input Group：组合式输入控件
-
Native Select：原生下拉选择器
5. 交互控制与日历
涉及时间选择与特定数值交互的组件：
-
Switch：布尔值开关
-
Slider：数值滑动选择器
-
Calendar：日期选择控件
-
Popover：基于触发器的气泡弹出框
6. 高级弹出层系统 (Overlays)
用于阻断式交互与扩展视图的弹出层组件：
-
Dialog：居中模态对话框
-
Sheet：侧边滑出式抽屉
-
Drawer：移动端风格底部抽屉
-
Hover Card：悬停预览卡片
-
Command：支持搜索的命令面板
-
Context Menu：右键呼出式上下文菜单
7. 其他布局与工具 (Misc)
页面细节调整与复杂容器布局相关的辅助组件：
-
Resizable：可调整大小的面板布局
-
Accordion：手风琴式折叠面板
-
Tabs：视图选项卡切换控件
-
Scroll Area：自定义滚动条区域
-
Dropdown Menu：操作下拉菜单
-
Aspect Ratio：固定纵横比容器
-
Tooltip：元素气泡提示
-
Pagination：列表分页控件
-
Avatar：用户头像展示
-
Direction：阅读方向与排版控制
-
Item：通用列表项容器
8. 更多组件扩展 (More Components)
适用于特定场景的高级组件及组合扩展：
-
Alert Dialog：需要用户确认的警告对话框
-
Sonner：全局 Toast 消息通知
-
Spinner：加载动画指示器
-
Combobox：支持模糊搜索的下拉选择框
-
Input OTP：验证码输入控件
-
Kbd：键盘快捷键视觉展示
-
Collapsible：基础折叠面板
-
Button Group：按钮组合容器
-
Toggle Group：状态切换按钮组
-
Chart：数据可视化图表组件
总结
该演示项目穷尽列出了通过命令行工具完整安装的 55 个 shadcn-ui 独立组件，并对其进行了系统性归类与页面级渲染测试，为后续基于该组件库的实际系统开发提供了直观的技术参考依据。