[Frontend] shadcnui: 新一代组件库解决方案

https://risingstars.js.org/2024/en

2024 年最流行，最火热的项目排名

shadcnui：This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps.

提供的是组件代码片段，你可以将这些组件代码片段粘贴到你的项目里面。

对比传统组件库

antd：

  • 样式难以重置
  • 需要等到官方维护
  • 历史包袱重
    • react-hooks-form
    • @tanstack/react-table
    • framer-motion
    • embla-carousel

使用 shadcnui 时，你可以直接复制组件的源码到你的项目中，或者采用官网的 cli 工具：

npx shadcn-ui add [component]

例如

npx shadcn-ui add alert-dialog

这意味着在你的项目里面的 package.json 中，不存在 shadcnui 的依赖。

shadcnui 的核心有两大块：

  • RadixUI：headlessUI，解决逻辑层问题，提供的每个组件逻辑是完善的，但是没有任何样式。
  • tailwindcss：原子类 css 库

如果基于 Vite 来使用 shadcnui，还会涉及到安装 postcss、autoprefixer.

工具链核心模块

tailwindcss

这是一个原子类的 css 库，也是当年（2019年）最火的项目。一句话概括，那就是将常用的样式声明写成了类的形式，之后基本不用再写单独的样式声明，只需要在 html 标签上挂类就好了。

bootstrap、bulma 一类的 css 库

tailwindcss优点：可定制性高

tailwindcss缺点：上手需要时间

思考🤔：为什么现在流行这种 css 解决方案？

  • 不用来回切换位置
  • 和现代前端框架的流行有关系，现代前端框架都是使用状态来驱动视图，期望使用状态控制一切
<template>
	<div id="app">
    <div :class="test">xxx</div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      test: {
        abc: true,
        def: true,
        ghi: false
      }
    }
  }
}
</script>

另外一个 css 原子类库可以关注一下，就是 unocss. 这是由 Vite 团队成员所推出的原子类 css 库。相比 tailwindcss 有这么一些特点：

  1. 按需生成

  2. 极具灵活性: unocss 对自己的定位是一个 css 引擎而非一个框架

    import UnocssPlugin from '@unocss/vite'

import PresetTachyons from '@unocss/preset-tachyons'
import PresetBootstrap from '@unocss/preset-bootstrap'
import PresetTailwind from '@unocss/preset-tailwind'
import PresetWindi from '@unocss/preset-windi'
import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'

export default {
 plugins: [
   UnocssPlugin({
     presets: [
       // PresetTachyons,
       PresetBootstrap,
       // PresetTailwind,
       // PresetWindi,
       // PresetAntfu
       // 选择其中一个...或多个！
     ]
   })
 ]
}

  3. 简化类名属性

    <button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">点击</button>

    <button 
 	bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
 	text="sm white"
 	font="mono light"
 	p="y-2 x-4"
 	border="2 rounded blue-200">
  点击
</button>

postcss

这是一个 css 后处理器平台。

思考🤔：什么叫做后处理？

就是对 css 代码做一些收尾工作

  • 添加浏览器前缀
  • 压缩
  • 语法降级
  • ......

autoprefixer、px2rem、cssnano 以插件的形式安装到 postcss 里面

关注：lightingcss 是 postcss 的一种锈化（rustification）产品

  • postcss → lightingcss
  • babel → swc
  • webpack → turpopack、rspack
  • electron → tauri

RadixUI

RadixUI 是属于 HeadlessUI 的一种。所谓 HeadlessUI，指的是将用户界面（UI）的逻辑与显示层（视图层）解耦的组件库或工具。这类工具通常只提供功能逻辑和无样式的原始 html 结构，而不包含具体的视觉样式，让开发者可以完全自由地定制外观。

特点：

  1. 无样式
  2. 高可定制性
  3. 专注于功能逻辑

常见的 HeadlessUI 有：

shadcnui快速上手

目前 shadcnui 对 React 生态更加友好，所以你看到 官网 的安装指南更多是聚焦于 React 生态的框架，例如 Next.js、Remix

我们选择 Vite 来搭建项目。跟着 官方文档 进行项目搭建即可。

storybook

Storybook 能够提供一个可交互的组件文档，不仅如此，还可以结合测试工具，运行快照测试和交互测试。

Storybook核心功能

  1. 组件环境: 和应用环境是隔离开的，专注于单个组件的开发和测试
  2. 文档化
  3. 交互式测试
  4. 插件生态
  5. 多框架支持：React、Vue、Angular、Svelte....

安装 storybook

npx storybook@latest init

安装后会在 src 目录下生成一个 stories 的目录，里面默认有 button、header 和 page 这三个组件，这是 storybook 提供的 3 个示例组件，方便开发人员快速上手。另外还会启动一个本地服务器，端口号 6006，打开之后就能看到这 3 个示例组件的各种演示。

posted @ 2025-06-23 22:57  Zhentiw  阅读(143)  评论(0)    收藏  举报