shadcn/ui

shadcn/ui 是什么

shadcn/ui 是一套设计精良的 React 组件集合。与常见的组件库不同，它并不以 npm 包的形式被安装引用，而是把组件源码直接复制进你的项目，让你可以自由修改、扩展，最终形成属于自己的组件库。

项目基于 Tailwind CSS 与 Radix UI 构建，兼顾视觉默认值与无障碍访问，官方口号是「Open Source. Open Code.」。

核心理念

• 源码即组件：组件代码属于你的仓库，改样式、改行为都不受上游约束。
• 可组合：组件之间可以自由拼装，适合搭建复杂界面。
• 有想法的默认值：开箱即用的设计细节，减少反复调样式的时间。
• 可访问性优先：交互组件基于 Radix UI，键盘操作与屏幕阅读器支持较好。

典型使用方式

通过官方 CLI 将所需组件添加到项目中（具体命令以官方文档为准）：

# 示意：按官方文档初始化并添加组件
npx shadcn@latest init
npx shadcn@latest add button

添加后，组件会出现在项目的组件目录中，你可以像维护自己的代码一样维护它。

适用技术栈

• React / Next.js
• Vite
• Tailwind CSS
• Radix UI / Base UI

适合谁

如果你正在搭建后台系统、产品前端或企业设计系统，并且希望对 UI 有完全的掌控权，shadcn/ui 是一个值得优先考虑的基础方案。它更适合有一定 React 与 Tailwind 经验的开发者。

许可证

MIT License，可自由用于商业项目。