2023年前端新星【shadcn/ui】，星标44K究竟有什么魅力?

在开源领域，前端项目一直备受关注，涌现出众多耳熟能详的名字：React、Vue、Bootstrap等。然而，江山代有才人出，各领风骚数百年。在2023年，一个新的名字正在崭露头角，成为前端领域的一颗耀眼新星。它在GitHub上已经赢得了超过44K的星标，它就是shadcn/ui！

01 shadcn/ui介绍

最受欢迎的项目排行榜

这份「2023 JavaScript Rising Stars」榜单，关注的是 2023 年 GitHub 上 Star 增长速度最快的 JavaScript 开源项目。该榜单显示，过去一年最热门的 JavaScript 项目是 shadcn/ui。

React生态排行榜

• shadcn/ui，是一个用 React 编写的用户界面组库，允许通过 TailwindCSS 定制样式。shadcn/ui 建立在Radix之上，Radix是一套无头组件，为可访问性和键盘交互等问题提供了原型。

• shadcn/ui，区别于其他流行的库（如MUI、ChakraUI、React Spectrum），它不是一个可下载的NPM包。相反，你可以通过一个终端命令来集成 shadcn/ui 组件，该命令会安装底层依赖项，并将组件源代码直接拷贝到你的代码库中，以便进一步修改。

02 shadcn/ui功能特点

01功能

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

• 深色模式：支持 Next.js 和 Vite 应用的暗黑模式。
• cli工具：自动配置项目，与框架集成、生成配置文件及添加组件等。
• 组件库：包括 常见的 Form、Table、Tab 等 40+ 组件。

②特点

shadcn/ui 优势

• 易于上手：适合具备基础HTML、CSS、JavaScript和框架知识的人。通过复制粘贴或CLI安装，快速使用组件，同时有完善的文档支持。
• 高可访问性：遵循WCAG标准，支持屏幕阅读器等辅助功能。
• 高度定制：提供对组件源代码的直接访问，满足各种应用需求，提高扩展和维护的便利性。

shadcn/ui 缺点

• 手动操作：与其他组件库相比，需要额外手动操作，增加工作量。
• 代码膨胀：直接访问组件源代码导致代码库增大，代码行数增多。
• 维护挑战：与Tailwind类似，大规模项目维护成本增加。

以下是它的GitHub star历史，shadcn/ui 于今年1月份创建，不到1年时间，shadcn/ui 就超过40Kstar，这是多少项目都难以企及的。

03 shadcn/ui 使用方法

shadcn/ui 可以在支持 React 的框架的项目中使用，例如 Next.js、Astro、Remix、Gatsby 等。shadcn/ui 支持和各种框架集成使用，如下：

这也是比较方便快捷方式，你也可以手动来配置，需要一步步将shadcn/ui 所需的各种组件安装进项目，比较麻烦，我们还是看下在Vite中使用的例子。

①创建 React 项目

npm create vite@latest

②添加 Tailwind 和配置

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

③添加配置到 tsconfig.json

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

④更新 vite.config.ts

# 解决导入Nodejs path模块类型报错
npm i -D @types/nodeimport path from 'path'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
plugins: [react()],
resolve: {
alias: {
src: path.resolve(__dirname, './src'),
},
},
})

⑤运行 CLI 并生成 components.json

npx shadcn-ui@latest init

这一步会生成 components.json 配置，以及 src/components 、 src/lib 两个文件夹，配置就已经完成了。

需注意：按照原文档配置的@导入路径会直接在根目录生成，导致无法正常导入。建议将@别名改为src，确保在src目录下生成。然后，使用CLI工具添加组件。

之后，你就可以导入该组件以在应用中使用。用 CLI 工具添加一个 button 组件：

npx shadcn-ui@latest add button

该命名将在 src/components 下添加一个 button 组件的代码，常规导入后即可使用。

import { Button } from "./components/ui/button"

function App() {
  return (
    <Button>Click me</Button>
  )
}

export default App

效果如图所示：

04 shadcn/ui 组件的通用架构

shadcn/ui 基于核心原则构建，即组件的设计应与其实现分开。因此，shadcn/ui 中的每个组件都具有两层架构。即：

• 结构和行为层
• 样式层