shadcn/ui 一个用于 React（Next.js）项目的可复用 UI 组件库，基于 Radix UI 和 Tailwind CSS。

shadcn/ui 是一个用于 React（Next.js）项目的可复用 UI 组件库，基于 Radix UI 和 Tailwind CSS。它的目标是提供灵活、可定制且易于维护的 UI 组件，而不是像 Ant Design 或 Material UI 那样提供一个完整的 UI 设计系统。

shadcn/ui 的特点

1. 不是 npm 包，而是代码拷贝

   • 你并不会像安装 antd 那样 npm install shadcn-ui，而是直接把组件代码拷贝到你的项目中，你可以完全控制这些代码。

2. 基于 Radix UI 和 Tailwind CSS

   • 组件使用 Radix UI 的无样式组件，然后通过 Tailwind CSS 进行美化，非常易于定制。

3. 灵活性极高

   • 你可以自由修改组件的代码，调整样式或逻辑，而不受官方更新的限制。

4. 适用于 Next.js 和 React

   • 推荐用于 Next.js，但也可以用于 React 项目。

5. 无需额外的 JavaScript 运行时

   • 组件是静态的 React 组件，没有额外的 JavaScript 运行时，不会增加 bundle 体积。

如何使用 shadcn/ui

1. 安装 CLI

你需要使用 shadcn CLI 来安装组件：

sh
npx shadcn-ui@latest init

然后按照 CLI 提示进行设置。

2. 添加组件

比如要安装 Button 组件：

sh
npx shadcn-ui@latest add button

这会在你的 components/ui/ 目录下生成 button.tsx 文件，你可以自由修改。

3. 使用组件

tsx
import { Button } from "@/components/ui/button";

export default function Example() {
  return <Button variant="outline">点击我</Button>;
}

常见组件

shadcn/ui 提供了一些常见的 UI 组件，例如：

• Button（按钮）
• Card（卡片）
• Dialog（对话框）
• Dropdown Menu（下拉菜单）
• Input（输入框）
• Table（表格）
• Tooltip（工具提示）
• Tabs（标签页）
• Accordion（手风琴）
• Skeleton（骨架屏）
• Toast（通知）
• 还有更多……

你可以使用 npx shadcn-ui add <组件名> 添加它们。

shadcn/ui 适合谁？

✅ 适合：

• 需要自定义 UI，但不想从零开始的人
• 喜欢 Tailwind CSS 和 Radix UI 的开发者
• 需要高自由度、低依赖的 UI 解决方案

❌ 不适合：

• 想要开箱即用的设计系统（如 MUI、Ant Design）
• 不想修改组件代码，希望完全由官方维护

总结

shadcn/ui 不是一个传统的 UI 库，而是一个 可复用的 UI 组件代码库，允许你自由修改组件，而不会被官方更新影响。如果你在用 Next.js + Tailwind CSS，并且需要高自由度的 UI 组件，它是一个不错的选择！ 🚀