还在用那些改起来麻烦、样式死板的 UI 框架？shadcn/ui 可能正好适合你。它长得好看、用起来简单，还能随意改源码。本期小编为大家带来一份超实用的 shadcn/ui使用教程，确实是一个简单好用的React UI新选择。
一、shadcn/ui 是什么？值不值得用？
如果你在找一个灵活、颜值高、还能自由定制的 React UI 解决方案，shadcn/ui 就值得了解一下。
它不是传统意义上的组件库（比如 Material UI、Ant Design 那种），而是一个“组件源码合集”——你用 CLI 工具把你需要的组件拷到项目里，然后想怎么改就怎么改，样式、逻辑都能动，真正做到 UI 自由。
shadcn/ui 基于 Radix UI 和 Tailwind CSS，可访问性、响应式、设计一致性都做得不错。对了，它2023年在 GitHub 上爆火，一年内涨了 5 万多 Star，热度可见一斑。
二、快速开始：一条命令就能搞定
1. 安装 CLI 工具
确保你已经配置好 Tailwind（如果你用的是 Next.js 模板，一般都自带了）。
然后用下面的命令初始化：
npx shadcn-ui@latest init
它会引导你配置项目基础，比如是否用 TypeScript、使用哪个组件风格、哪些颜色主题等等。
2. 添加组件超简单
比如你想用一个按钮，直接：
npx shadcn-ui@latest add button
按钮组件的源码就会被加到你项目的 /components/ui 文件夹里，你可以直接像平常那样引入：
import { Button } from "@/components/ui/button";
export default function Demo() {
return <Button>点我</Button>;
}
✅ 优点：这不是黑盒组件，代码都在你手上，想改样式、加功能、调交互都可以。
三、shadcn/ui 有什么特别的？
总结一下它的亮点：
🔧 完全可定制
你拿到的是源码，几乎没有框架限制。要改就改，组件怎么拆、怎么组合都随你。
🎨 设计干净统一
默认样式很好看，不土不花，适合做产品界面。如果你有自己的设计规范，也能快速覆盖。
♿ 可访问性优秀
底层用的是 Radix UI，键盘导航、屏幕阅读器支持等 Accessibility 特性都有。
🌗 支持主题切换
只要配置好 CSS 变量，浅色/深色一键切换。
🧱 好搭好改
组件结构清晰，统一用 Tailwind 写样式，有经验的前端一眼就能看懂怎么自定义。
四、shadcn/ui 和其他 UI 库比怎么样？
| 对比维度 | shadcn/ui | Material UI | Ant Design | Chakra UI |
|---|---|---|---|---|
| 灵活性 | 🌟🌟🌟🌟🌟 | 🌟🌟 | 🌟🌟 | 🌟🌟🌟🌟 |
| 定制性 | 🌟🌟🌟🌟🌟 | 🌟🌟🌟 | 🌟🌟 | 🌟🌟🌟🌟 |
| 默认设计 | 🌟🌟🌟🌟 | 🌟🌟🌟🌟🌟 | 🌟🌟🌟🌟🌟 | 🌟🌟🌟 |
| 组件数量 | 中等 | 多 | 多 | 偏少 |
| 学习成本 | 中 | 低 | 低 | 低 |
| 适合谁 | 追求自由/美感 | 想快搭企业后台 | 习惯大厂 UI 风格 | 想快速做通用界面 |
一句话总结：
- 想省事、开箱即用 → AntD、MUI。
- 想自由、玩出花样 → shadcn/ui。
- 想轻量但风格统一 → Chakra UI。
五、实战案例：用 shadcn/ui 做个仪表盘页面
以后台常见的 Dashboard 页面为例，你可以用以下组件快速拼出原型：
Card+Grid→ 显示统计数据（订单数、访问量等）Tabs+Table→ 用户列表页签Dialog→ 弹窗表单Button→ 操作按钮DropdownMenu→ 三点菜单Avatar→ 用户头像
这些组件都支持响应式、暗黑模式，而且因为是你项目的代码，随时能二次封装，很适合做团队设计系统。
<Card>
<CardHeader>
<CardTitle>本月访问量</CardTitle>
<CardDescription>数据更新于 10 分钟前</CardDescription>
</CardHeader>
<CardContent>📈 12,347</CardContent>
</Card>
六、作者是谁？为什么靠谱？
作者是 @shadcn，本名是 Zeno Rocha，Vercel 的设计工程师，之前做过不少关于 Next.js、设计系统的内容。
他发起这个项目的初衷就是：“不要再受 UI 框架的限制，让开发者自己掌控组件。”
shadcn/ui 正是这样一个实践项目，后来也被 Vercel 团队支持，质量和理念都挺靠谱。
七、常用资源导航（建议收藏 🔖）
- 🌐 官方网站：https://ui.shadcn.com
- 📚 中文文档：https://www.shadcn.net
- 💻 GitHub：https://github.com/shadcn-ui/ui
- 🧵 作者 Twitter：https://twitter.com/shadcn
- 🤝 社区交流（GitHub Discussions）：https://github.com/shadcn-ui/ui/discussions
✅ 写在最后：适合你的就是最好的
shadcn/ui 不是适合所有项目，但如果你：
- 想做高度个性化的产品 UI；
- 有一定前端基础，能看得懂组件结构；
- 或者正在搭建设计系统…
那它绝对是个值得尝试的选择。
💡 建议： 从简单的按钮或表单组件开始上手，慢慢熟悉它的结构和风格，再考虑替换更复杂的部分。
