shadcn/ui 的核心理念是提供一套可复用的 UI 组件，这些组件不是作为一个传统的组件库来安装和使用，而是可以直接复制和粘贴代码到你的项目中。这种方式提供了更大的灵活性和控制权，因为你不需要将整个库作为依赖项添加到你的项目中。目前 GitHub Star 73k+。
可在线自定义主题，并 copy 主题样式文件到项目中。
部分组件预览：
使用组件：
配置 components.json：
{
"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 对应的使用代码。
安装
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
