【前端】Shadcn/UI

长期更新

• 特点

1. 跟以往 UI 库（如 Ant Design、MUI、Chakra UI 等）有几个本质区别，非常适合现代前端项目（特别是 TailwindCSS 用户）。
2. 不是一个传统的“安装开箱即用”组件库，而是一个“复制源码 + 按需定制”的组件系统，它强调可控性、Tailwind 原生兼容性、按需引入、零锁定。
3. 对比

特性/维度	Shadcn/UI	传统 UI 库（AntD、MUI、Chakra）
组件获取方式	拷贝源码（从 CLI 拉取）	安装 npm 包后直接引入
样式系统	原生使用 Tailwind CSS	自己的样式体系（CSS-in-JS、Less、emotion）
样式是否可控	完全可定制，自己维护样式 ✅	需遵循库的 API 和主题变量，定制较复杂
依赖绑定	无锁定，组件源码属于你自己 ✅	强绑定库版本，升级困难
按需引入	默认按需，只引入你 copy 的组件	要配合 tree shaking 或插件实现按需
易于集成	易与 Tailwind + Next.js 搭配	部分库样式冲突（需额外配置）
🚫 缺点	初始需要 CLI + 配置环境	安装即用
🚫 生态 & 文档	较新，仍在成长	传统 UI 库生态成熟，配套工具完善

使用

# 初始化项目 (仅支持 React)
npx create-next-app@latest my-app
cd my-app

# 安装 Tailwind + Shadcn CLI
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx shadcn-ui@latest init

# 添加组件
npx shadcn-ui@latest add button
#components/ui/button.tsx 文件出现