用途:shadcn/ui 提供一组设计美观、可访问且可定制的 UI 组件,组件代码可直接复制粘贴到应用中,基于 Radix UI 与 Tailwind CSS,便于构建自有组件库。
主要能力:涵盖导航(breadcrumb、navigation-menu、menubar)、表单(input、button、select、checkbox、radio-group)、布局(card、dialog、sheet、tabs)、数据展示(table、badge、avatar、separator)与反馈(toast、alert、progress、spinner)等组件。组件使用 Class Variance Authority(CVA)管理变体,可通过 CSS 变量做主题定制,并支持组件组合。
使用方式:先初始化项目并添加组件,命令为 npx shadcn@latest init,以及 npx shadcn@latest add button、npx shadcn@latest add card、npx shadcn@latest add input;可一次添加多个组件,如 npx shadcn@latest add button card input,也可从自定义注册表添加,如 npx shadcn@latest add @v0/dashboard。通过 components.json 配置风格、RSC、TSX、Tailwind 路径、基础色、CSS 变量与别名。不使用 CLI 时,可手动安装依赖 npm install class-variance-authority clsx tailwind-merge lucide-react,并创建 utils 文件提供 cn 函数,再从文档复制组件代码。
适用场景:需要可定制、可访问组件库的前端项目,尤其是使用 Tailwind CSS 与 TypeScript 的 React 应用。
限制:资料未提供收费、价格、平台支持范围与具体效果等信息;组件需自行复制与维护,定制依赖修改源码。