复制就能使用 GitHub 热门高颜值 UI 组件库

shadcn/ui 的核心理念是提供一套可复用的 UI 组件，这些组件不是作为一个传统的组件库来安装和使用，而是可以直接复制和粘贴代码到你的项目中。这种方式提供了更大的灵活性和控制权，因为你不需要将整个库作为依赖项添加到你的项目中。目前 GitHub Star 73k+。

可在线自定义主题，并 copy 主题样式文件到项目中。

部分组件预览：

使用组件：

配置 components.json：

components.json 文件是 shadcn/ui 项目中用于存储项目配置的文件。通过这个文件，shadcn/ui 可以理解你的项目结构以及如何为你的项目生成定制化的组件。

在 components.json 文件中，你可以指定项目的样式、Tailwind CSS 配置、React Server Components 支持、组件的语言类型以及路径别名等。

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "rsc": false,
  "tsx": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

方式 1. 选择并复制所需的组件放到项目文件下，到官网 copy 对应的使用代码。

方式 2. 使用 CLI 向项目中添加组件。

安装

pnpm dlx shadcn@latest add card
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

使用

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

功能和特性：

美观设计：每个组件都经过精心设计，确保它们在视觉上吸引人且易于使用。

无依赖性：由于不需要安装整个库，因此没有额外的依赖性负担，这有助于保持你的项目轻量级。

高度可定制：你可以根据自己的品牌和设计需求，对复制的组件代码进行定制。

开源：作为一个开源项目，shadcn/ui 允许你自由地使用、修改和分发这些组件。

快速集成：你可以迅速将高质量的组件集成到你的项目中，而不需要花费时间从头开始构建。

Tailwind CSS 集成：shadcn/ui 与 Tailwind CSS 紧密集成，利用 Tailwind 的实用工具类来快速构建和定制组件的样式。

路径别名支持：通过配置 jsconfig.json 或 tsconfig.json 文件中的路径别名，你可以轻松地引用项目中的组件和工具函数。

CLI 工具：虽然不是必需的，shadcn/ui 提供了一个命令行界面（CLI）来帮助管理组件的复制和粘贴过程。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/shadcn-ui/ui

官方文档：https://ui.shadcn.com/