用途:整理 shadcn/ui 组件常见模式,帮助在项目中添加组件、构建变体系统、定制主题与扩展组件。
主要能力:CVA(class-variance-authority)声明式、类型安全的变体定义,支持 variants、compoundVariants、defaultVariants 与 VariantProps 类型推导;cn() 工具函数结合 clsx 与 tailwind-merge 解决 Tailwind 类冲突(如 cn('px-4 py-2','px-6') 输出 'py-2 px-6');OKLCH 主题变量(--background、--foreground、--primary、--destructive、--border、--ring、--radius),含 .dark 暗色覆盖;组件扩展策略为包裹而非修改源文件,通过 forwardRef 与组件 props 组合新增 loading 等状态。
使用方式:初始化与添加组件使用命令 npx shadcn@latest init、npx shadcn@latest add button、npx shadcn@latest add dialog。类合并统一用 cn(),变体统一用 CVA。
适用场景:添加 shadcn 组件、构建多变体组件系统、主题与暗色模式定制、在不改动源码的前提下扩展组件。
限制:资料未提供具体版本、性能数据、收费信息与跨框架支持细节;OKLCH 描述为 2026 标准,实际浏览器兼容性暂未提供。