shadcn

shadcn/ui 组件管理技能，用于在项目中管理 shadcn 组件。

触发条件

• 添加 shadcn 组件到项目
• 搜索和查找合适的组件
• 修复组件集成问题
• 调试组件样式
• 自定义组件样式
• 组合多个组件构建复杂 UI

使用方式

> 添加一个 Dialog 组件并配置为可拖拽
> 搜索适合做日期范围选择的组件
> 修复 Button 组件在暗色模式下样式异常
> 用 shadcn 创建一个可编辑的数据表格

主要组件

分类	组件
布局	Card, Container, Sidebar
表单	Input, Select, Checkbox, DatePicker
反馈	Toast, Alert, Progress, Skeleton
导航	Tabs, Breadcrumb, Pagination
叠加层	Dialog, Drawer, Popover, Tooltip
数据展示	Table, Calendar, Avatar

工作流程

1. 运行 shadcn add <component> 安装组件
2. 复制组件代码到项目
3. 根据需求调整样式
4. 集成到现有页面

与 Codex 配合

Codex 可以自动安装、配置和定制 shadcn 组件，并根据设计需求进行样式调整。