shadcn组件库

https://ui.shadcn.com/ 是 shadcn/ui 项目的官方网站，它是一个高质量、可定制的 React 组件库 ，基于 Radix UI（提供无障碍、无样式的原始组件）和 Tailwind CSS（用于样式）构建。

它的主要特点包括：

1. 不是传统意义上的 npm 包

   shadcn/ui 并不是一个直接安装使用的 UI 库（比如像 Ant Design 或 Material UI 那样）。相反，它提供了一套可复制到你项目中的组件代码。你可以使用它的 CLI 工具将组件"安装"到你的项目中，之后这些组件就完全属于你的代码库，可以自由修改、扩展或定制。

2. 高度可定制

   因为组件代码在你自己的项目里，你可以：

   • 修改样式（通过 Tailwind）
   • 调整逻辑
   • 替换图标（默认用 Lucide React）
   • 适配设计系统

3. 开箱即用的设计

   组件设计美观、现代，遵循一致的设计语言（如圆角、间距、阴影等），适合快速搭建专业级应用界面。

4. 支持暗色模式、RTL（从右到左语言）、TypeScript

   官网已明确支持这些高级功能，例如 2026 年 1 月新增了 RTL 支持。

5. 包含完整示例

   网站提供了多个完整页面模板，如：

   • 登录/注册（Authentication）
   • 仪表盘（Dashboard）
   • 任务管理（Tasks）
   • Playground（交互演示）

6. 开源 & 免费

   项目托管在 GitHub：https://github.com/shadcn-ui/ui，拥有超过 10 万 star，社区活跃。

---

适合谁用？

• 使用 Next.js + Tailwind CSS 的开发者
• 想要一个灵活、不被 UI 库限制的前端团队
• 希望建立自己设计系统的公司或个人

---

快速开始：

npx shadcn-ui@latest init
npx shadcn-ui@latest add button

这会把 Button 组件的源码下载到你的项目中，而不是从 node_modules 引用。

---

总结：shadcn/ui 不是一个"黑盒"UI 库，而是一套"可拥有"的组件模板，让你既能快速开发，又能完全掌控 UI 代码。