UI组件库可以很快地在新项目上启动并运行。但是，如果您构建具有定制设计的产品，试图自定义这些图书馆的外观和感觉是一项艰巨的任务，可能会导致无与伦比的代码。

有许多UI库（或者，正如某些人称为UI框架）可供选择，当然，对于不同的前端框架有不同的库。您可能会认为，在2023年底，该行业可能已经解决了一个或两个解决方案，但远非现实。

事实是，与我经常说的软件和网络中的任何内容一样，这取决于

瑞安·佛罗伦萨（Ryan Florence）的上面推文（x？）让我思考了这个问题 - 不是关于谁应该责备，因为那不好，而是关于为什么我们如何陷入这种情况的原因。<<<<<<<< /p>

在这篇文章中，我将简要概述导致我们进入当前生态系统的样式解决方案，我们将研究一些更常见，更受欢迎的UI库。 /p>

（启动）绑带，我们要乘车。

CSS框架和库的历史

回到当天，网络设计师正在手写CSS，相信我，这是一个充满曲折的旅程（有关更多信息，请参见CSS The Good Parts）。然后，2000年代击中了它们，将它们带来了CSS框架，例如Blueprint，960 Grid System，YUI Grids和YAML（可能不是您想的YAML）。这些框架引入了响应式网格和清洁的UI元素，更改了游戏。

当我们以为我们已经看到了一切时，像Twitter Bootstrap，Foundation和Bulma这样的巨人进入了现场。他们使开发快速并确保了始终如一的样式，但是另一面？网站也开始感觉有点...统一。

认识到这一点，社区枢纽，引入了诸如BEM之类的方法，以注入一些独特性和模块化样式。

底线？ CSS框架从仅解决布局需求转变为提供全面的UI工具包。但是，除此之外，方法论出现了，推动了更量身定制和模块化的样式。

JavaScript框架更改了游戏

随着JavaScript框架（例如Angular，React和Vue）的出现，开发人员需要一种更详细的方法来与这些新组件模型相对应。

CSS的主要功能之一（CSS中的CS，即Cascade）成为这些新框架的问题。

因此，一种新的溶液在JS中出生。 Styled Components和Emotion等图书馆中的库中大多在React生态系统中盛行，允许范围范围的样式到组件，因此摆脱了级联问题。

原子设计ftw

由Web开发人员和设计师Brad Frost倡导的一个关键概念是atomic design。

这个概念的要旨使开发人员和设计师可以在这个新的“组成世界”中思考。这个想法是，您应该将一个组件视为原子设计的总和。

一个按钮是一个原子，保存图像或一些文本的卡和按钮 - 是一个分子。与其中几个分子一致的页面是一个生物。

该概念的高潮归结为CSS框架，例如Tailwind CSS。

ðâ€如果您想学习一些整洁的技巧，请检查一些Tailwind CSS Tips and Tricks Worth Knowing。

需要UI框架

您可能会问自己：我真的需要一个UI框架吗？答案可能只是 no 。

Josh Commeau写了一篇非常好的文章，上面写着：You don’t need a UI framework。

就像我说的那样，我可能会在任何与软件有关的主题中都一遍又一遍地陈述 - 这取决于。

ðâ€out

查看Why Do We Need UI Component Libraries? with Alon Valadji 22

我曾经以为building a design system with Styled Components and Tailwind是必经之路。但是，不一定是这种情况。

如今，有很多选择可能适合您的需求，使您更快地开始，也许避免对设计师的需求，或为完整的定制设计系统奠定基础。

网络组件的诺言

在此时间点，我想到有某种网络组件标准，无论您的前端技术堆栈如何，都可以使用。但是，仍然没有一个解决所有问题的解决方案。

Web组件最初是在the promise of providing a convenient way引入的，以创建可重复使用的可重复使用的HTML元素，而无需等待完整的规格和实现过程就可以更快地开发。

但是，他们面临的几个挑战阻碍了他们在UI开发中的广泛采用。主要问题之一是JavaScript Frameworks引入的复杂性，这导致了过度设计的构建过程和依赖图。

此外，Web组件还在浏览器兼容性和标准化方面挣扎。结果，开发人员已转向诸如React，Angular和Vue之类的替代解决方案，这些解决方案为构建UI组件提供了更直接且熟悉的方法。

尽管有最初的承诺，但Web组件尚未成为UI开发的首选解决方案，它们曾经被设想为。

如果我们可以使用Web组件，那么我们可以使用哪些解决方案？

UI库的类型

Theo Brown是一位知名的YouTuber和技术影响者，最近破坏了one of his videos中不同类型的UI库。我认为他在将这些类型的类型分类中做得很好：

1. CSS的扩展：，例如Sass，Less，Tailwind，CSS Modules，以使自己的东西看起来自己是某种方式。
2. 行为库/无头：，例如，HeadlessUI，Radix，React Aria，涉及事物的行为，而不是样式。
3. 样式系统：，例如，TailwindUI，DaisyUI，用于开发人员的外观和行为。
4. 组件库：例如，MUI，Ant Design，Mantine是他们自己的事。您需要学习如何与他们合作。 （在西奥的看法中，ChakraUI是另一种野兽，坐在我们想要成为的地方的某个地方。） ## 是什么使好UI库

以下是一些使UI框架的关键因素：

• 一致性：该框架应在整个应用程序中提供一致的UI元素，模式和行为。这可以帮助用户快速了解如何使用界面。
• 灵活性：在保持一致的同时，该框架还应允许自定义和扩展，以满足不同应用程序的特定需求。模块化和可自定义的组件是理想的。
• 性能：应为性能优化框架。文件大小，渲染速度和效率很重要，尤其是在移动设备上。
• 可访问性：遵循Web可访问性指南确保该框架对所有用户都有效。 ARIA角色，语义HTML和键盘支持就是示例。
• 文档：良好的文档和示例使该框架更容易学习和实施。 API参考，样式指南和代码样本有助于加速开发。
• 浏览器支持：该框架应在现代浏览器上工作，并在较旧的浏览器中优雅地降解。逐步增强原则适用。
• 社区：框架背后的活跃社区提供了讨论论坛，插件和持续维护。这有助于维持长期的生存能力。
• 直觉：该框架应与用户的心理模型和期望保持一致。利用自然映射，一致性，标准和熟悉的模式。
• 响应能力：该框架应适应各种屏幕尺寸和输入方法。移动优先和流体布局是这里的最佳实践。

总而言之，一个良好的UI框架平衡了一致性和灵活性，同时优化性能，可访问性和设备支持。出色的文档，活跃的社区和直观的设计也是关键。遵循既定的UX原理和启发式方法有助于确保质量结果。

流行的UI库

React

The React ecosystem由于其生态系统和受欢迎程度的大小，可能拥有最多的UI库。由于我对这个世界更熟悉，这里的列表比其他框架更长，而且并非所有反应组件库的完整列表。

组件库：

• Material UI ： Google’s Material Design最受欢迎的实现之一。 MUI提供了各种组件和主题选项，并且已经存在了很长时间。话虽如此，您受其系统的约束。
• Ant Design：许多重型击球手（例如Tencent，Baidu，AliBaba等）使用的坚实选择。支持所有现代浏览器，SSR，esm，甚至Electron。还针对Angular，Vue和more进行了社区实施。确实使用CSS-In-JS，因此请期待运行时开销以及ANTD做事的方式。
• ChakraUI：强调A11y，这意味着它与Wai-Aria的可及性标准完全兼容，已获得OSS奖，并拥有繁荣的社区。如前所述，它是更好的选择之一，因为它具有一个很好的模型，可用于构建可组合的UI，built-in hooks和大型的深色模式支持。这是Zag.js背后的团队，该团队将UI作为州机器处理。再一次，您需要学习API，而交换可能很难。
• Mantine ：另一个完整的组件库，在A11y中烤制，超过100个组件和钩子。 Mantine都是基于打字稿的，并且有一种覆盖默认样式的方法。再一次，关于如何使用其功能和API来实现您的目标的知识很多。
• Blueprint ：集合用于构建台式机数据密集型接口的组件。它特别指出，它并非设计用于移动设备。它很可能会更好地用于构建内部工具，仪表板和电子应用程序。蓝图是此列表中具有日期选择器组件的少数LIB之一。
• React-Admin：顾名思义，此组件库的目标是用于B2B（企业对企业）的构建管理员界面，例如，管理您系统中的用户。它基于材料设计，并具有整洁的功能，您可以通过为您的数据提供示例API端点来猜测列表的视图。
• NextUI：不要与React Meta-Framework，Next.js混淆，该库是建立在尾风CSS之上的，并声称其学习曲线最少。主题由您的tailwind.config.js文件（a11y''来处理，并且对所有组件都有深色主题支持。覆盖样式仅通过放入不同的尾风级别的名称来完成。

无头：

• HeadlessUI ：库只是您构建可访问组件所需的无头部或行为。它是专门设计用于与尾风集成的，但是您可以使用您喜欢的任何CSS解决方案。
• React Aria：由Adobe团队建造的图书馆。这是一个完善的无头解决方案，可处理行为，可访问性和内在化。该库的API表面主要是您可以使用（双关语意图ð）来构建组件的挂钩集合。该自由的预定义组件目前在Alpha中。
• RadixUI ：曾经只有一个无头的组件库，该团队最近添加了主题和一些样式。图书馆的A11Y和可合能性功能非常出色，我本人在使用它方面拥有丰富的经验。所有主题均通过CSS自定义属性暴露，可以用CSS轻松覆盖。

混合方法：

• ShadCN/UI ：一个在街区上的新孩子，该库采用的方法与此处提到的大多数图书馆不同。而不是安装组件或整个lib并将其添加为依赖关系，而是将贴花代码复制到自己的代码库中。这是为了使您完全拥有组件，并将设计与实施区分开。它是用尾风构建的，为了使用此工具，您可以使用CLI生成组件代码并调整tailwind.config.js。
• KumaUI ：另一个相对较新的竞争者，Kuma使用零运行时CSS-IN-JS创建无头UI组件，从而可以具有很大的灵活性。它的灵感来自其他零运行时CSS-In-JS解决方案，例如PandaCSS，Vanilla Extract和Linaria，以及Styled System，Chakraui和Native Base。 ### ！»»vue

成为一个不熟悉Vue生态系统的人，我注意到的一件事是，那里的许多图书馆都有中文而不是英语的文档。

我不知道你，但是我的普通话是我怎么说的？不存在的。似乎即使图书馆拥有出色的文档，您也不一定知道。

组件库：

• Quasar：它不认为自己是库，而是一个框架。在我看来，在我眼中，它是基于VUE的，但是您可以使用它来创建网站和应用程序，这意味着它使用CLI来为Web，Mobile，Mobile，Desktop，Spa生成不同的输出（单个页面应用程序），SSR（服务器端渲染）等等。
• Vuetify：声称是无需设计技能的开源UI库，具有精美的手工vue组件。它具有所有钟声和吹口哨，就像最成熟的组件库一样。再一次，您需要知道使用此库的API，并锁定到其组成构成模型中。
• Element Plus：正如网站所述，Element Plus是设计人员和开发人员的基于VUE 3的组件库。不确定它与包装的其余部分有何不同，但是它确实具有相同的组件可供选择。它有超过20k的星星，每周下载超过150万，这表明其受欢迎程度。
• VueMaterial：顾名思义，Vuematerial是材料设计的VUE实施。该文档具有易于使用的API的简单，轻巧，响应能力。对于组件库来说，听起来像是所有正确的事情。 ### Angular

我上次在生产中使用Angular的时间大约是7年前，现在称为Angular.js。但是，该框架开始与signals being introduced复兴，并且仍然在许多企业公司使用它。

组件库：

• Angular Material ：喜欢各种框架的其余材料实现。所有人都对自己说了同样的话 - 高质量，多才多艺和无摩擦。无论最高级工作，我都猜ð2。提防主题并尝试做任何没有提供的事情。
• PrimeNG：您选择基本主题的方式很好。向您展示了从其他流行的设计框架（例如材料设计，bootstrap，soho，fluent，fluent，nano等）中选择的设计选项。这是通过视觉编辑器完成的，这是主题选项的一部分。 Primeng还具有FIGMA UI套件，现成的模板和SASS API。
• NG Bootstrap：是的，听起来像是Twitter Bootstrap（4.0）对Angular的绑定。需要注意的是，您需要学习LIB的API表面以及了解Bootstrap类名称。

svelteï»»

我真正喜欢Svelte的一件事是，它具有很多用于处理样式和动画之类的东西的内置事实。对于造型，您只需在CSS寿命的组件文件中拥有一个style标签，并且仅范围范围为该组件。最重要的是，拥有可以轻松处理tween和spring动画的运动模型非常好。

无头：

• Svelte Headless UI ：一个完整的无头UI端口，它与SvelteKit（Svelte Meta框架）兼容。有关更多详细信息，请参见上文。

组件库：

• SvelteUI ：又有一个打字稿，完全具有组件库。它具有高度可自定义的50多个组件。从布局组件，操作，输入，排版以及在组件库中需要的所有爵士乐的范围。
• Smelte：使用材料设计规范在Svelte和Tailwind CSS上建立的UI框架。另外，这是一个非常有趣的名字。它的要旨是LIB具有一个汇总插件，您可以定义主题，颜色等。然后，您需要导入库CSS，您可以使用！该库有一个日期选择器，导航抽屉和树景，在大多数libs中很少见。

Qwik

作为列表中的最新框架，QWIK生态系统仍然是新的。因此，这里的选项很苗条。但是，您可以做的一件事是leverage the React ecosystem inside your Qwik app并从那里使用组件库。

Vue，Angular和Svelte的其他社区实施也将开放这些生态系统。

无头：

• QwikUI：尽管仍在Beta中，但Qwikui提供了一个无头的套件，用于构建完全兼容的Wai-Aria组件。现在可以在Beta中获得组合框，选项卡和手风琴。工具提示，选择和弹出案的草稿。该团队还自己在Shadcn/ui的方法上进行编码。

Web组件

正如我上面提到的那样，网络组件本来是前端世界的救星，但未能交付。但是，一些公司在UI Web组件方面已经取得了成功。这些公司之一是SalesForce，其Lightning Web Components。

除此之外，我只听说过一个组件库，我认为值得一提的是：

• Shoelace：使用Web组件构建意味着该库是框架不可知的，但是，React是唯一有权获得一流支持的框架。它还具有内置的本地化，并且组件是使用Lit建造的。请记住，如果您想在SSR中获取组件内容，这可能不符合您的需求。

跨框架

新的不可知论库必定是由Web组件构建的，而使用CSS工具也是最近也弹出的。这是两个有趣的新来者：

• ArkUI：由国家机器提供动力的无头访问组件，用于React，Vue和SolidJ。这也是由Zag.js和Chakra UI的创建者制作的，这似乎是这两个产品之间的中间立场。
• Flowbite：尾风的组件不仅用于JavaScript框架，例如React，Qwik，Vue，Svete，Svelte，Angular和Solidjs，还用于流行的Meta框架，例如Astro，Next.JS，Remix，Remix，Remix，Nuxt，Meteor和Non JS框架例如Laravel，Symfony，Ruby上的Rails，Pheonix，Django和Flask。

使用 Builder.io， 限制较少的设计

// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />
}

registerComponents([MyHero, MyProducts])