核心特点

1. 无捆绑设计，按需引入
   • 不提供 monolithic 包，而是通过复制粘贴组件源码到项目中使用，避免额外依赖和代码膨胀。
   • 每个组件都有独立的文件结构，便于定制和维护。
2. 基于 Radix UI 原语
   • 使用 Radix UI 的无样式组件作为基础，确保高质量的交互逻辑和无障碍支持。
   • 通过 Tailwind CSS 实现样式，完全自定义设计语言。
3. 极致可定制性
   • 所有组件样式基于 Tailwind 的工具类，可直接在源码中修改。
   • 支持自定义主题、颜色方案和响应式设计。
4. 完善的组件生态
   • 提供常见组件：按钮、表单、模态框、下拉菜单、导航栏等。
   • 支持复杂交互组件：日期选择器、文件上传、表格等。
5. TypeScript 优先
   • 所有组件使用 TypeScript 编写，提供完整的类型定义。

技术栈

• 前端框架：React（支持 Next.js、Create React App 等）
• 样式系统：Tailwind CSS v3
• 组件基础：Radix UI
• 状态管理：Zustand（部分组件）
• 表单处理：React Hook Form

典型应用场景

1. 企业级应用
   • 管理后台、数据仪表盘等需要高质量 UI 组件的场景。
2. SaaS 产品
   • 快速搭建具有专业视觉效果的用户界面，支持自定义品牌主题。
3. 个人项目与创业公司
   • 无需设计资源，利用现有组件快速迭代产品原型。

基本使用流程

1. 安装依赖
   bash

   npx shadcn-ui@latest init
   
2. 添加组件
   bash

   npx shadcn-ui@latest add button
   

3. 在项目中使用
   tsx

   import { Button } from '@/components/ui/button';
   
   const App = () => {
     return (
       <Button variant="primary">
         点击我
       </Button>
     );
   };
   

组件示例

1. 按钮组件
   tsx

   <Button variant="outline">
     轮廓按钮
   </Button>
   
2. 模态框组件
   tsx

   <Dialog>
     <DialogTrigger>打开模态框</DialogTrigger>
     <DialogContent>
       <DialogTitle>确认操作</DialogTitle>
       <DialogDescription>你确定要执行此操作吗？</DialogDescription>
       <DialogFooter>
         <Button variant="secondary">取消</Button>
         <Button variant="primary">确认</Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>
   

优缺点对比

替代方案

• Material UI：功能全面的组件库，提供统一设计语言。
• Chakra UI：高度可定制的 React 组件库，适合快速开发。
• Headless UI：无样式组件库，需自行实现 UI 细节。

总结