# shadcn/ui 组件将 shadcn/ui 组件添加到主题 React 项目中。此技能在 `tailwind-theme-builder` 设置 CSS 变量、ThemeProvider 和黑暗模式后运行。它处理组件安装、定制以及将组件组合成工作模式。 **先决条件**：主题基础设施必须存在（CSS 变量、components.json、cn() 实用程序）。如果未设置，请先使用 `tailwind-theme-builder`。 ## 安装顺序按依赖顺序安装组件。首先是基础组件，然后是功能组件： ### Foundation（首先安装） pnpm dlx shadcn@最新添加按钮 pnpm dlx shadcn@latest 添加输入标签 pnpm dlx shadcn@最新添加卡 ### 功能组件（根据需要安装） # 表格 pnpm dlx shadcn@latest 添加表单 # 需要：react-hook-form、zod、@hookform/resolvers pnpm dlx shadcn@latest 添加文本区域选择复选框开关 # 反馈 pnpm dlx shadcn@latest 添加 toast # 需要：sonner pnpm dlx shadcn@latest 添加警报徽章 # 叠加 pnpm dlx shadcn@latest 添加对话框弹出下拉菜单 # 数据显示 pnpm dlx shadcn@latest add table # 用于数据表，也：@tanstack/react-table pnpm dlx shadcn@latest 添加标签分隔符头像 # 导航 pnpm dlx shadcn@最新添加导航菜单命令 ### 外部依赖组件|需要 ---|--- 表格 | `react-hook-form`、`zod`、`@hookform/resolvers` 吐司| `桑纳` 数据表| `@tanstack/react-table` 命令 | `cmdk` 日期选择器 | `date-fns`（可选）单独安装外部依赖：`pnpm add react-hook-form zod @hookform/resolvers` ## 已知问题这些是可防止常见错误的记录更正： ### 基数选择 — 无空字符串 // 不要使用空字符串值全部 // 中断 // 使用哨兵值全部 // 有效 const实际=值===“__any__”？ “”：值 ### React Hook 表单 — 空值 // 不要传播 {...field} - 它传递输入拒绝的 null <输入值={字段.值?? ''} onChange={field.onChange} onBlur={field.onBlur} 名称={字段.名称} ref={字段.ref} /> ### Lucide 图标 — Tree-Shaking // 不要使用动态导入 - 图标在生产中会发生树形变化从 'lucide-react' 导入 * 作为 LucideIcons const Icon = LucideIcons[iconName] // prod 中的中断 // 使用显式映射从 'lucide-react' 导入 { Home, Users, Settings, type LucideIcon } const ICON_MAP: Record = { 主页、用户、设置 } const Icon = ICON_MAP[iconName] ### 对话框宽度覆盖 // 默认 sm:max-w-lg 不会被 max-w-6xl 覆盖 // 不起作用 // 使用相同的断点前缀 // 有效 ## 自定义组件 shadcn 组件使用主题中的语义 CSS 标记。定制： ### 变体扩展通过编辑`src/components/ui/`中的组件文件来添加自定义变体： // button.tsx — 添加“品牌”变体 const buttonVariants = cva("...", { 变体：{ 变体：{ 默认值：“bg-primary text-primary-foreground”，品牌：“bg-brand文本-品牌-前景悬停：bg-brand/90”， // ...现有变体 }, }, }) ### 颜色覆盖使用主题中的语义标记 - 切勿使用原始 Tailwind 颜色： // 不要使用原始颜色

沙德恩用户界面

包含技能