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

往期举荐

居然能够在一个我的项目中混用 Vue 和 React？

一行代码禁止用户调试前端代码！

高颜值挪动端UI组件库

Bun 1.0 正式公布，爆火的前端运行时，速度遥遥领先！

图解 60 个 CSS 选择器，一网打尽！

Node.js 终于原生反对 .env 文件了！