用途:shadcn/ui 面向使用 React 与 Tailwind CSS 的项目,提供可访问、可直接投入生产的 UI 组件。其核心理念是“复制粘贴组件,而非安装 npm 包”,组件被复制进项目后由开发者完全拥有代码。
主要能力:组件基于 Radix UI 无头原语构建,使用 Tailwind CSS 样式,TypeScript 优先,内置暗色模式支持,支持组合优于配置。技术栈包括 Radix UI、Tailwind CSS、TypeScript、class-variance-authority、clsx、tailwind-merge。组件目录位于 components/ui,工具函数位于 lib/utils。
使用方式:先初始化项目,命令为 npx shadcn-ui@latest init,随后按交互提示选择 TypeScript、样式(Default/New York)、基础色(Slate/Gray/Zinc/Neutral/Stone)、CSS 变量、React Server Components 等。添加组件使用 npx shadcn-ui@latest add button,可一次添加多个,如 npx shadcn-ui@latest add button card dialog form input。配置通过 components.json 管理 style、rsc、tsx、tailwind、aliases 等选项。
适用场景:适合使用 Next.js、Vite、Remix 或 Astro 构建的 React 应用,需要可访问、生产就绪组件,希望完全控制组件代码与样式,偏好组合而非配置,需要开箱即用暗色模式与 TypeScript 优先组件的场景。
限制:不适用于未使用 Tailwind CSS 的项目(样式核心依赖);不支持旧版浏览器(使用现代 CSS 特性);不适合偏好打包 npm 库而非代码所有权的团队;不适用于 Vue、Svelte、Angular 等非 React 框架。收费、价格与平台信息暂未提供。