用途:在 React 或 Next.js 项目中添加、定制和主题化 shadcn/ui 组件,处理表单、对话框、数据表格与无障碍实现,并判断何时用组件、何时自定义实现。
主要能力:通过 CLI 初始化并把组件源码复制到 components/ui;用 components.json 配置风格、路径别名与 Tailwind;用 cn()(clsx + tailwind-merge)合并条件类名;以 CSS 变量定义主题并支持暗色模式;基于 Radix UI 获得键盘导航、ARIA 属性与焦点管理;配套 React Hook Form + Zod 表单、TanStack Table 数据表格、响应式 Dialog/Drawer 等模式。
必要用法:在已有 Next.js 项目执行 npx shadcn@latest init,随后用 npx shadcn@latest add button 添加组件(可一次 add button card input label,或 add --all、add --list)。Vite 需在 vite.config.ts 中配置 @ 路径别名;Pages Router 需把 components.json 的 rsc 设为 false。暗色模式常用 next-themes,并在 <html> 上添加 suppressHydrationWarning。
适用场景:React/Next.js 应用中需要可控源码、可定制样式且要求无障碍的 UI 构建。
限制与注意:不应把 shadcn/ui 作为 npm 包安装;不应直接改动 Radix 原语,而应扩展 shadcn 包装组件;不应硬编码颜色,应使用 CSS 变量主题令牌;条件类名应始终经 cn();避免嵌套交互元素。资料未提供具体收费、价格与效果数据。