2023 年前端 UI 组件库概述，百花齐放！

UI组件库提供了各种常见的 UI 元素，比如按钮、输入框、菜单等，只需要调用相应的组件并按照需求进行配置，就能够快速构建出一个功能完善的 UI。

虽然市面上有许多不同的UI组件库可供选择，但在2023年底也并没有出现一两个明确的解决方案能够适用于所有情况。因为不同的前端框架（例如React、Angular、Vue等）都有自己的优势和适用场景，所以对应的UI组件库也会有所不同。

本文就来简要概述当前前端生态系统的样式解决方案，并介绍一些常见和流行的UI库。

UI 库概述

CSS 框架和库历史

过去，网页设计师需要手写 CSS 样式，这是一个曲折的过程。随后，出现了一些CSS框架，如Blueprint、960 Grid System、YUI Grids等，它们引入了响应式网格和简洁的UI元素，改变了网页设计的方式。

然后，像 Twitter Bootstrap、Foundation 和 Bulma 这样的巨头出现了。它们提供了快速开发和一致的样式，但也导致了一些问题，即网站开始感觉过于相似和统一。

为了解决这个问题，社区引入了一些方法论，例如BEM，用于注入独特性和模块化风格，以使网页设计更加个性化和灵活。

总而言之，CSS框架和库从最初只满足布局需求，逐渐发展为提供全面的UI工具包。与此同时，涌现出更多的方法和技术，以实现更定制化和模块化的样式。

JavaScript框架改变了规则

随着Angular、React和Vue等JavaScript框架的出现，开发人员需要一种更细粒度的方法来应对这些新的组件模型。传统的CSS中最重要的特性之一是层叠，但对于这些新的框架来说，层叠机制却带来了一些问题。

为了解决这个问题，出现了一种新的解决方案，即CSS in JS。在React生态系统中，像Styled Components和Emotion这样的库变得非常流行，它们允许开发人员将样式与组件作用域相关联，从而解决了层叠问题。

原子化设计

原子化设计是一种组件化设计方法，由 Brad Frost 提出。它的核心思想是将 UI 元素分解成不同的层次，并将其视为原子、分子和有机体等不同的组件。

一个原子代表着最基本的、不可再分的元素，比如按钮、输入框等。一个分子则由多个原子组合而成，代表了相对复杂的组件，例如一个带有图片、文本和按钮的卡片。而有机体则由多个分子组成，代表了更高级的 UI 元素，比如整个页面或应用。

通过将 UI 设计拆解成组件的层次结构，开发人员和设计师可以更加系统地构建和管理 UI。这种方法提倡重用和组合，使得开发过程更高效，同时也使得 UI 更容易维护和扩展。

Tailwind CSS 等 CSS 框架采用了原子设计理念，提供了一系列的原子级样式类，开发人员可以根据需要组合这些样式类来构建 UI。这种方式使得样式的复用和调整更加灵活和精确，并且可以减少冗余的样式代码。

真的需要 UI 库吗？

那我们真的需要一个 UI 组件库吗？答案可能是不需要。

在软件开发中，很多时候都需要视情况而定，是否使用 UI 组件库也用过视情况而定。如果希望能够快速启动项目并且不需要过多的自定义，那么使用一个成熟、易用的UI组件库是一个不错的选择。但如果追求独特的设计和完全自定义的外观，UI 组件库可能就不适合你。

UI 库的分类

UI 库可以分为以下类型：

• CSS的扩展：像Sass、Less、Tailwind和CSS Modules这样的工具可以帮助开发者以自定义的方式为网页添加样式。它们提供了更强大和灵活的CSS功能，使开发者能够更方便地管理和重用样式。

• 行为库/无样式库：如HeadlessUI、Radix 和 React Aria，它们专注于实现 UI 元素的行为逻辑，而不关注它们的具体样式。可以使用这些库来处理用户交互、表单验证、状态管理等功能。

• 样式系统：例如TailwindUI和DaisyUI，它们提供了一套内置的样式和行为模板，使你可以快速构建具有统一外观和行为的 UI。可以根据需要选择和组合这些样式模板，从而节省开发时间和工作量。

• 组件库：像MUI、Ant Design和Mantine这样的组件库是独立的实体，它们提供了一整套可重用的UI组件，如按钮、输入框、表格等。需要学习如何正确使用这些组件，并按照它们的文档和示例进行开发。

什么是好的 UI 库？

一个好的UI组件库关键考虑因素如下：

• 一致性：UI 库应该在整个应用程序中提供一致的UI元素、模式和行为。这有助于用户快速理解如何使用 UI 库。

• 灵活性：在保持一致性的同时，UI 库也应该允许自定义和扩展，以适应不同应用程序的特定需求。模块化和可自定义的组件是理想的选择。

• 性能：UI 库应该经过性能优化。文件大小、渲染速度和效率等因素很重要，尤其是在移动设备上。

• 可访问性：遵循网络可访问性准则可以确保UI 库适用于所有用户。ARIA角色、语义化的HTML和键盘支持等是一些例子。

• 文档：良好的文档和示例使UI 库更容易学习和实施。API参考、样式指南和代码示例有助于加速开发。

• 浏览器支持：UI 库应该在现代浏览器中正常工作，并在旧版本浏览器中逐渐降级。渐进增强原则同样适用于UI 库。

• 社区：UI 库背后的活跃社区提供讨论论坛、插件和持续的维护。这有助于确保长期可用性。

• 直观性：UI 库应该与用户的心智模型和期望相一致。利用自然映射、一致性、标准和熟悉的模式。

• 响应式：UI 库应该适应不同的屏幕尺寸和输入方式。以移动优先和流式布局为最佳实践。

总之，一个好的 UI 库在保持一致性和灵活性的同时，还要优化性能、可访问性和设备支持。出色的文档、活跃的社区和直观的设计也非常重要。贯彻使用者体验原则和启发式原则有助于确保优质的结果。

热门UI组件库

React

由于其庞大的生态系统和普及度，React生态系统可能拥有最多的 UI 库。

组件库

• Material UI：一种基于Google的Material Design设计的流行实现。它提供了大量的组件和主题选项，并且已经存在很长时间，开发者需要按照他们的系统进行开发。

• Ant Design：一个可靠的组件库选择，被许多大型公司使用，如腾讯、百度、阿里巴巴等。支持所有现代浏览器、服务端渲染、esm甚至Electron。还有为Angular、Vue等框架提供的社区实现。它使用CSS-in-JS，因此可能会在运行时增加一些额外开销，还有自己独特的开发方式。

• ChakraUI：强调可访问性（A11y），完全符合WAI-ARIA可访问性标准，获得了开源奖项，并有一个活跃的社区。它是构建可复用UI的优秀选择，内置了hooks，并支持非常好的暗黑模式。这个团队还开发了Zag.js，将UI作为状态机处理。学习其API可能需要一些时间，切换到其他库可能有一些困难。

• Mantine：另一个功能齐全的组件库，具备良好的可访问性，提供了100多个组件和hooks。Mantine完全基于TypeScript，可以覆盖默认样式。你需要学习如何使用它的函数和API来达到你的目标。

• Blueprint：一组用于构建桌面端数据密集型 UI 的组件。它特别适用于构建内部工具、仪表板和Electron应用程序。Blueprint在这个列表中是少数几个带有日期选择器组件的库之一。

• NextUI：不要与 React 元框架 Next.js 混淆，这个库是使用 Tailwind CSS 构建的。它声称学习曲线很小。主题由tailwind.config.js文件处理，具备良好的可访问性，并且所有组件都支持暗黑主题。只需使用不同的 Tailwind 类名即可覆盖样式。

Headless

• HeadlessUI：它提供了构建可访问组件所需的核心功能，但没有提供具体的样式。它专门设计用于与Tailwind CSS框架配合使用，但也可以选择使用其他CSS解决方案。它的目标是提供一种灵活的构建方式，让开发者完全掌控组件的外观和样式。

• React Aria：由Adobe团队开发的一个库，它是一个完整的 HeadlessUI 解决方案。它不仅处理组件的行为和功能，还关注组件的可访问性和国际化。该库的API主要由一组钩子组成，可以使用这些钩子来构建自己的组件。虽然它还处于alpha版本，但它的目标是提供开箱即用的预定义组件。

• RadixUI：以前是一个 HeadlessUI 组件库，但最近添加了主题和一些样式。它以其出色的可访问性和可组合性功能而闻名。使用 RadixUI 时，所有主题都通过CSS自定义属性公开，这意味着可以轻松地用自己的CSS样式覆盖默认样式。这个库的目标是提供一种简单而强大的方式来构建组件，同时允许自定义和扩展其外观。

混合方法

• ShadCN/UI：它提供了一种不同于其他库的开发方法。不需要通过npm安装组件或整个库，而是将代码直接复制粘贴到自己的代码库中。这样做的目的是让开发者完全拥有组件，并将设计和实现分离。它使用 Tailwind 进行构建，并提供了一个CLI工具，可以生成组件代码并调整tailwind.config.js文件。

• KumaUI：它使用零运行时CSS-in-JS技术创建 headless UI组件，提供了很大的灵活性。它在设计上受到了其他零运行时CSS-in-JS解决方案（如PandaCSS、Vanilla Extract和Linaria）以及Styled System、ChakraUI和Native Base的启发。

Vue

Vue生态系统中，很多库的文档都是用中文而不是英文编写的。

组件库

• Quasar：它本身不被视为一个库，而更像是一个框架。它是基于Vue的，但它的理念是可以使用它来创建网站和应用，这意味着它使用CLI为Web、移动端、桌面端、SPA（单页应用）、SSR（服务端渲染）等生成不同的输出。

• Vuetify：声称自己是一个不需要设计技能的开源UI库，拥有精心制作的Vue组件。它像大多数成熟的组件库一样，功能齐全。同样，需要了解该库的API，并被“锁定”到它们的组件组合模型中才能使用。

• Element Plus：正如官网所述，Element Plus是“面向设计师和开发者的基于Vue 3的组件库”。不确定它与其他库有何不同，但它提供了相同种类的组件选择。它拥有超过2万颗star和每周超过15万次下载量，这表明它很受欢迎。

• VueMaterial：顾名思义，VueMaterial是Material Design的Vue实现。文档简单、轻量、响应式，具有易于使用的API，听起来像是一个完善的组件库所具备的优点。

Angular

Angular 正在经历一种复兴，并且仍有很多公司在使用它。

组件库

• Angular Material：和其他各种框架的Material实现一样。它们都自称是高质量、多功能的。

• PrimeNG：这个集合中有一个很好的地方是可以选择基础主题。可以从其他流行的设计框架（如Material Design、Bootstrap、Soho、Fluent、Nano等）中选择设计选项。这是通过一个可视化编辑器完成的，它是主题选项的一部分。PrimeNG还提供了一个Figma UI工具包、现成的模板和一个SASS API。

• NG Bootstrap：它是Angular与Twitter Bootstrap（4.0）的绑定。但需要注意的是，开发者需要同时学习库的API以及掌握Bootstrap的类名的使用方式。

Svelte

Svelte 内置了很多处理样式和动画的功能。对于样式，只需在组件文件中使用style标签，并且它的作用域仅限于该组件。此外，Svelte还具有处理缓动和弹簧动画的motion模型，这对开发体验来说非常棒。

Headless 组件

• Svelte Headless UI：完全移植自React Headless UI，与SvelteKit（Svelte元框架）兼容。

组件库

• SvelteUI：一个功能齐全的组件库，使用TypeScript编写。它包含了50多个高度可自定义的组件，涵盖了在一个组件库中常见的布局、操作、输入和排版等各种元素。

• Smelte：一个基于Svelte和Tailwind CSS的UI框架，符合Material Design规范。它提供了一个Rollup插件，可以在其中定义主题、颜色等样式。只需要导入库的CSS，就可以开始使用它了！这个库还提供了一些在其他库中较为少见的组件，例如日期选择器、导航抽屉和树视图。

Solid

SolidJS 是一个相对较新的框架，与上述大多数框架相比存在时间较短。它是你下一个项目的一个可靠选择。

Headless 组件

• Kobalte：一个未经样式化的、可访问的、可组合的UI工具包，用于构建设计系统基础。受到AriaKit、RadixUI、React Araia和Zag的启发。从官方文档来看，它看起来很像Radix的实现。注意：仍处于测试版。

组件库

• SUID：SolidJS的MUI移植版本。正如文档中所说“相同的API，相同的设计”，如果来自React并且使用过MUI，这会让你感到宾至如归。同样的注意事项也适用。它们有一个很酷的工具，可以将React代码转换成Solid代码。

• Solid Bootstrap：顾名思义，这是一个在SolidJS之上的Bootstrap包装器。不同之处在于，你需要使用props（例如variant）而不是类来操作大部分内容。还有一个“Core”版本，其中包含了 headless 实现的组件。

Qwik

作为本文最新的框架，Qwik生态系统仍然很新。因此，在这里的选项相对较少。但可以利用React生态系统在Qwik应用中使用组件库。

Headless 组件

• QwikUI：虽然仍处于测试版，但QwikUI提供了一个 headless 套件，用于构建完全兼容WAI-ARIA组件。现在的beta版本中有下拉框、标签页和手风琴。他们还制定了提示工具、选择器和弹出窗口的草案。该团队还在开发自己的ShadCN/UI方法，代号“Fluffy”。

跨框架

最近也出现了一些使用CSS工具链构建的独立库：

• ArkUI：使用状态机为React、Vue和SolidJS提供 headless 可访问组件。由Zag.js和Chakra UI的创建者制作，这似乎是这两项产品之间的折中方案。

• Flowbite：构建在Tailwind之上的组件，不仅适用于JavaScript框架，如React、Qwik、Vue、Svelte、Angular和SolidJS；还适用于流行的元框架，如Astro、Next.js、Remix、Nuxt、Meteor；以及非JS框架，如Laravel、Symfony、Ruby on Rails、Pheonix、Django和Flask。

总结

如上所述，有许多选择可供我们选择。选择正确的解决方案可能会大大提高工作效率，而错误的选择则可能导致一系列问题。

因此，在做出选择时要谨慎。希望这篇文章能够给你一个清晰的概述，让你认真思考是否需要使用库，或者是否值得投入精力来开发自己的解决方案。这不仅关乎产品团队，也关乎用户的体验。

记住，用户并不在意你使用的是哪种解决方案。选择适合项目和需求的解决方案最为重要。

参考：https://www.builder.io/blog/25-plus-ui-component-libraries