用途:帮助理解并正确书写任意 shadcn ui 组件,明确各库各自负责的关注点(无障碍、变体、类名合并、图标)。
主要能力:
- 说明组件栈分层:Radix 负责无头行为与无障碍(焦点陷阱、ARIA、键盘、RTL、受控状态);class-variance-authority(cva)负责类型安全的 variant/size 组合;tailwind-merge 负责 Tailwind 类冲突消解;clsx 负责条件类名;Tailwind 负责可视样式;lucide-react 负责图标。
- 给出核心模式:cn() 合并助手、cva 驱动的 Button、Radix 包装的 Dialog、lucide 图标用法、调用方 className 覆盖语义。
- 提供决策树:选择层、统一 radix-ui 与旧 @radix-ui/react-*、tailwind-merge 版本匹配、cva 稳定版与 beta。
必要用法: cn() 定义为 export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) },调用方 className 应最后传入 cn() 以使其覆盖变体类。cva 应在模块作用域调用一次。新项目可安装统一包:npm install radix-ui,并按需导入如 import { Dialog as DialogPrimitive } from "radix-ui";旧项目继续用 @radix-ui/react-dialog 等按组件包,二者不可混用。tailwind-merge 与 Tailwind 版本需匹配:Tailwind v3.4 用 ^2.6.0,v4.0–v4.3 用 ^3.0.0,否则新工具类可能静默合并失败。cva 生产环境用 ^0.7.1 稳定版,1.0.0-beta(截至 2026-05 为 beta)提供变异体新特性。
适用场景:在 shadcn 项目中读写组件、排查类名覆盖或版本选择问题。
限制:资料未提供具体价格、性能基准或完整平台支持范围;需始终从 @/components/ui/... 导入包装组件,而非直接导入 Radix 原语。