Overview of the front-end UI component library in 2023, let a hundred flowers bloom!

16833200:

The UI component library provides a variety of common UI elements, such as buttons, input boxes, menus, etc. You only need to call the corresponding components and configure them according to your needs, and you can quickly build a fully functional UI.

Although there are many different UI component libraries on the market to choose from, at the end of 2023 there will not be one or two clear solutions that can apply to all situations. Because different front-end frameworks (such as React, Angular, Vue, etc.) have their own advantages and applicable scenarios, the corresponding UI component libraries will also be different.

This article provides a brief overview of the current front-end ecosystem’s styling solutions and introduces some common and popular UI libraries.

UI library overview

CSS framework and library history

In the past, web designers would need to write CSS styles by hand, which was a tortuous process. Subsequently, some CSS frameworks appeared, such as Blueprint, 960 Grid System, YUI Grids, etc., which introduced responsive grids and simple UI elements, changing the way web design was done.

Then, giants like Twitter Bootstrap, Foundation, and Bulma emerged. They offer fast development and consistent styling, but also lead to some problems where sites start to feel too similar and uniform.

To solve this problem, the community has introduced some methodologies, such as BEM, to inject uniqueness and modular style to make web design more personalized and flexible.

All in all, CSS frameworks and libraries have evolved from initially meeting layout needs to providing comprehensive UI toolkits. At the same time, more methods and techniques are emerging to enable more customized and modular styles.

JavaScript frameworks change the rules

With the emergence of JavaScript frameworks such as Angular, React, and Vue, developers need a more fine-grained approach to deal with these new component models. One of the most important features in traditional CSS is cascading, but for these new frameworks, the cascading mechanism has brought some problems.

To solve this problem, a new solution emerged, namely CSS in JS. In the React ecosystem, libraries like Styled Components and Emotion have become very popular, allowing developers to associate styles with component scope, thus solving the cascading problem.

Atomic design

Atomic design is a component design method proposed by Brad Frost. Its core idea is to decompose UI elements into different levels and treat them as different components such as atoms, molecules and organisms.

An atom represents the most basic, irreducible element, such as buttons, input boxes, etc. A molecule is composed of multiple atoms and represents a relatively complex component, such as a card with pictures, text, and buttons. Organisms, on the other hand, are composed of multiple molecules and represent higher-level UI elements, such as entire pages or applications.

By breaking down UI design into a hierarchy of components, developers and designers can build and manage UIs more systematically. This approach promotes reuse and combination, making the development process more efficient and making the UI easier to maintain and extend.

CSS frameworks such as Tailwind CSS adopt the atomic design concept and provide a series of atomic style classes. Developers can combine these style classes as needed to build UI. This approach makes style reuse and adjustment more flexible and precise, and can reduce redundant style code.

Do you really need a UI library?

So do we really need a UI component library? The answer is probably no.

In software development, it often depends on the situation. Whether to use the UI component library also depends on the situation. If you want to be able to start your project quickly without requiring too much customization, then using a mature and easy-to-use UI component library is a good choice. But if you’re after a unique design and a fully customized look, the UI component library may not be for you.

Classification of UI libraries

UI libraries can be divided into the following types:

CSS extensions : Tools like Sass, Less, Tailwind, and CSS Modules can help developers add styles to web pages in a customized way. They provide more powerful and flexible CSS functions, allowing developers to manage and reuse styles more easily.
Behavioral libraries/styleless libraries : Such as HeadlessUI, Radix and React Aria, which focus on implementing the behavioral logic of UI elements without paying attention to their specific styles. You can use these libraries to handle user interaction, form validation, state management, and more.
Style systems : For example, TailwindUI and DaisyUI, which provide a set of built-in style and behavior templates, allowing you to quickly build a UI with a unified appearance and behavior. These style templates can be selected and combined as needed, saving development time and effort.
Component libraries : Component libraries like MUI, Ant Design, and Mantine are independent entities that provide a complete set of reusable UI components, such as buttons, input boxes, tables, etc. You need to learn how to use these components correctly and develop according to their documentation and examples.

What is a good UI library?

The key considerations for a good UI component library are as follows:

Consistency : UI libraries should provide consistent UI elements, patterns, and behaviors across the entire application. This helps users quickly understand how to use the UI library.
Flexibility : While maintaining consistency, the UI library should also allow customization and extension to suit the specific needs of different applications. Modular and customizable components are ideal.
Performance : UI libraries should be optimized for performance. Factors like file size, rendering speed and efficiency matter, especially on mobile devices.
Accessibility : Following web accessibility guidelines ensures that your UI library works for all users. ARIA roles, semantic HTML and keyboard support are some examples.
Documentation : Good documentation and examples make UI libraries easier to learn and implement. API references, style guides, and code examples help speed development.
Browser support : UI libraries should work correctly in modern browsers and gradually degrade in older browsers. The principle of progressive enhancement also applies to UI libraries.
Community : An active community behind the UI library provides discussion forums, plugins, and ongoing maintenance. This helps ensure long-term availability.
Intuitiveness : UI libraries should be consistent with users’ mental models and expectations. Leverage natural mappings, consistency, standards, and familiar patterns.
Responsive : UI libraries should adapt to different screen sizes and input methods. Use mobile-first and fluid layouts as best practices.

In short, a good UI library should optimize performance, accessibility, and device support while maintaining consistency and flexibility. Excellent documentation, an active community, and an intuitive design are also very important. Implementing user experience principles and heuristics can help ensure quality results.

Popular UI component library

React

Due to its large ecosystem and popularity, the React ecosystem probably has the largest number of UI libraries.

Component library

Material UI : A popular implementation based on Google's Material Design design. It offers a large number of components and theme options and has been around for a long time, and developers need to develop according to their system.
Ant Design : A reliable component library choice used by many large companies such as Tencent, Baidu, Alibaba, etc. Supports all modern browsers, server-side rendering, esm and even Electron. There are also community implementations provided for Angular, Vue and other frameworks. It uses CSS-in-JS, so may add some additional overhead at runtime, and has its own unique way of development.
ChakraUI : Emphasizes accessibility (A11y), is fully compliant with WAI-ARIA accessibility standards, has won open source awards, and has an active community. It's an excellent choice for building reusable UIs, has built-in hooks, and supports very good dark mode. The team also developed Zag.js, which handles the UI as a state machine. It may take some time to learn its API, and there may be some difficulty switching to other libraries.
Mantine : Another full-featured component library with good accessibility, providing more than 100 components and hooks. Mantine is completely based on TypeScript and can override default styles. You need to learn how to use its functions and API to achieve your goals.
Blueprint : A set of components for building data-intensive UI on the desktop. It is especially suitable for building internal tools, dashboards and Electron applications. Blueprint is one of the few libraries in this list that comes with a date picker component.
NextUI : Not to be confused with the React meta-framework Next.js, this library is built using Tailwind CSS. It claims the learning curve is minimal. The theme is tailwind.config.jshandled by files, has good accessibility, and all components support dark themes. Simply use a different Tailwind class name to override styles.

Headless

HeadlessUI : It provides the core functionality needed to build accessible components, but does not provide specific styles. It is specifically designed to work with the Tailwind CSS framework, but there are options to use other CSS solutions. Its goal is to provide a flexible way to build and give developers full control over the appearance and style of components.
React Aria : A library developed by the Adobe team, it is a complete HeadlessUI solution. It not only deals with the behavior and functionality of components, but also focuses on their accessibility and internationalization. The library's API mainly consists of a set of hooks that can be used to build your own components. Although it is still in alpha version, it aims to provide predefined components out of the box.
RadixUI : Formerly a HeadlessUI component library, but recently added themes and some styles. It is known for its excellent accessibility and composability features. When using RadixUI, all themes are exposed through CSS custom properties, which means you can easily override the default styles with your own CSS styles. The goal of this library is to provide a simple yet powerful way to build components while allowing customization and extension of their appearance.

mixed methods

ShadCN/UI : It provides a development approach that is different from other libraries. Instead of installing components or entire libraries via npm, you can copy-paste the code directly into your own code base. The idea is to give developers full ownership of the component and separate design and implementation. It is built using Tailwind and provides a CLI tool that can generate component code and adjust tailwind.config.jsfiles.
KumaUI : It uses zero-runtime CSS-in-JS technology to create headless UI components, providing a lot of flexibility. Its design is inspired by other zero-runtime CSS-in-JS solutions such as PandaCSS, Vanilla Extract, and Linaria, as well as Styled System, ChakraUI, and Native Base.

Vue

In the Vue ecosystem, the documentation of many libraries is written in Chinese instead of English.

Component library

Quasar : It is not considered a library per se, but more like a framework. It is based on Vue, but the idea is that you can use it to create websites and applications, which means it uses the CLI to generate for web, mobile, desktop, SPA (single page application), SSR (server side rendering), etc. Different output.
Vuetify : Claims to be an open source UI library that requires no design skills and features carefully crafted Vue components. It's full-featured like most mature component libraries. Again, one needs to understand the library's API and be "locked" into their component composition model in order to use it.
Element Plus : As stated on the official website, Element Plus is a “Vue 3-based component library for designers and developers.” Not sure how it differs from other libraries, but it offers the same kind of component selection. It has over 20,000 stars and over 150,000 downloads per week, which shows its popularity.
VueMaterial : As the name suggests, VueMaterial is the Vue implementation of Material Design. The documentation is simple, lightweight, responsive, and has an easy-to-use API, which sounds like the advantages of a complete component library.

Angular

Angular is experiencing a renaissance and there are still many companies using it.

Component library

Angular Material : Same as the Material implementation of various other frameworks. They all claim to be high quality and versatile.
PrimeNG : A nice thing about this collection is the choice of base themes. Design options can be chosen from other popular design frameworks such as Material Design, Bootstrap, Soho, Fluent, Nano, and more. This is done through a visual editor, which is part of the theme options. PrimeNG also provides a Figma UI toolkit, ready-made templates, and a SASS API.
NG Bootstrap : It is Angular binding with Twitter Bootstrap (4.0). However, it should be noted that developers need to learn the API of the library and master the use of Bootstrap class names at the same time.

Svelte

Svelte has a lot of built-in functionality for handling styles and animations. For styles, just use the tag in the component file styleand it will be scoped only to that component. Additionally, Svelte has motionmodels for handling easing and spring animations, which is great for the development experience.

Headless components

Svelte Headless UI : Fully ported from React Headless UI, compatible with SvelteKit (Svelte meta framework).

Component library

SvelteUI : A full-featured component library written in TypeScript. It contains more than 50 highly customizable components, covering various common elements such as layout, operation, input and typography in a component library.
Smelte : A UI framework based on Svelte and Tailwind CSS, compliant with Material Design specifications. It provides a Rollup plug-in where you can define themes, colors and other styles. Just import the library's CSS and start using it! This library also provides some components that are less common in other libraries, such as date pickers, navigation drawers, and tree views.

Solid

SolidJS is a relatively new framework and has been around for a shorter time than most of the frameworks mentioned above. It's a solid choice for your next project.

Headless components

Kobalte : An unstyled, accessible, composable UI toolkit for building design system foundations. Inspired by AriaKit, RadixUI, React Araia and Zag. From the official documentation, it looks a lot like Radix's implementation. NOTE: Still in beta.

Component library

SUID : MUI ported version of SolidJS. As the documentation says "same API, same design", if coming from React and have used MUI, this will make you feel right at home. The same caveats apply. They have a cool tool that converts React code into Solid code.
Solid Bootstrap : As the name suggests, this is a Bootstrap wrapper on top of SolidJS. The difference is that you need to use props(for example variant) instead of classes to manipulate most things. There is also a "Core" version, which contains components implemented headless.

Quick

As the latest framework for this article, the Qwik ecosystem is still very new. So there are relatively few options here. But it is possible to leverage the React ecosystem to use component libraries in Qwik applications.

Headless components

QwikUI : Although still in beta, QwikUI provides a headless suite for building fully WAI-ARIA compliant components. The current beta version has drop-down boxes, tabs, and accordions. They also developed draft tooltips, selectors, and popups. The team is also developing its own ShadCN/UI approach, codenamed "Fluffy."

Cross-framework

Recently there have also been a few standalone libraries built using CSS toolchains:

ArkUI : Provides headless accessible components for React, Vue, and SolidJS using state machines. Made by the creators of Zag.js and Chakra UI, this seems to be a good compromise between the two products.
Flowbite : A component built on top of Tailwind, not only suitable for JavaScript frameworks such as React, Qwik, Vue, Svelte, Angular and SolidJS; but also suitable for popular meta frameworks such as Astro, Next.js, Remix, Nuxt, Meteor; and non-JS frameworks such as Laravel, Symfony, Ruby on Rails, Pheonix, Django, and Flask.

Summarize

As mentioned above, there are many options available to us. Choosing the right solution can significantly improve productivity, while the wrong choice can lead to a host of problems.

Therefore, be careful when making your choice. Hopefully this article will give you a clear overview and make you think seriously about whether you need to use a library or whether it's worth investing the effort in developing your own solution. This is not only about the product team, but also about the user experience.

Remember, users don’t care which solution you use. Choosing a solution that suits your project and needs is most important.