23年最火的前端组件库项目，竟然是它！

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。

大家好，我是「前端实验室」爱分享的了不起~

根据Github Star 新增情况，2023 年的 JavaScript 生态系统中最耀眼的明星项目无疑是 shadcn/ui,在不到一年的时间里面获得了39k Star，在众多项目中脱颖而出。

Shadcn UI

Shadcn UI - 是一个无头 UI 库。它有组件 API，但没有样式。他是建立在 Tailwind CSS 和 Radix UI 之上，目前支持 Next.js、Gatsby、Remix、Astro、Laravel 和 Vite，并且拥有与其他项目快速集成的能力

Shadcn/ui 与一般的组件库最大的不同在于，所有的元件都可以直接在文件中进行，shadcn/ui 并非一个可下载的 NPM 包。用户只需通过一个终端命令，即可将 shadcn/ui 的组件集成到代码库中。这一命令将自动安装底层依赖，并将组件源代码直接复制到项目中，以便进行进一步的定制。

特点

• 多种主题可直接套用
• 丰富的组件类型
• 100%定制化
• 复制粘贴就能使用
• 完整的无障碍体验
• 与 React Hook Form 和 Zod 的表单进行结合

多种主题可直接套用

除了有精美的官方主题外，在 Shadcn/UI 官网上有一个主题编辑器，点击 Customize 按钮可以实时切换风格和主题颜色，设计完成后，我们只需要拷贝 css 主要变量到我们的程序中即可

丰富的组件

Shadcn UI 拥有丰富的组件，包括 常见的 Form、 Table、 Tab 等 40+ 组件。

在Examples这个页面中还提供了仪表版（dashboard）、多种卡片、数据表格、登入页面等等精美实用的范例。这些全部都能通过「复制贴上」来应用到自己的项目中，省下从头设计 UI 的麻烦，对于独自开发 side project 的人来说简直是天上掉下来的礼物

100%定制化

前面有提到Shadcn ui与一般的组件库最大的不同在于，所有的元件都可以直接在项目中进行编辑。以下面这个button元件为例，当我们透过CLI指令将button新增到我们的项目中，会看到在comeponents文件夹下面多了一个ui文件夹，其中就能找到刚刚新增的button元件。

安装

以一个 Vite 项目为例，因为Shadcn/ui以来tailwindcss，所以先要安装tailwindcss

npm create vite@latest

# 载 Tailwind CSS 以及相关的套件，并生成 config 文件
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

在tsconfig.json 文件中添加以下设置，确保解析组件路径时不会出错

"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

执行 shadcn-ui CLI 指令来初始化 Shadcn ui

npx shadcn-ui@latest init

安装button 组件,会将 button 组件文件添加到你的 components/ui 文件夹中：

npx shadcn-ui@latest add button

然后可以在页面中 import 刚刚新增的 Button 组件

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Shadcn/ui不像其他组件库，若要使用单一组件的话不需要一次导入整包 package，可以直接透过 CLI 工具新增需要的组件，并无痛整合到现有的项目中。