Component libraries trends

Table of Contents

Headless and accessible #

aka unstyled, renderless

Main idea is to provide all the logic for component (often accessibility) without forcing any visual appearance.

Reach UI
Radix primitives
headlessui
ariakit
not a component library, but worth to mention React Spectrum

Based on a design system #

Main idea it is based on thoroughly documented design-system, so it gives more than just components. There can be a lot of implementations based on the same design system. For example, for material design:

Other design systems:

https://designsystemsrepo.com/design-systems/

For mobile development #

Main idea is to support mobile devices, for example, bottom navigation bar, gestures, safe-areas, action-sheet etc. Can be used for developing native apps with WebView (PhoneGap/Cordova) or for PWAs.

All react-native-web component libraries are also in this category:

Based on Tailwind #

Main idea: it is based on Tailwind. While CSS-in-JS in very unstable situation and they keep inventing zero-runtime solutions, Tailwind just works. So there is whole new wave of component libraries:

Not a component library #

This is new interesting approach. We already have enough good component libraries, so instead of creating another one, this tool allows to re-use existing. It is more like collection of snippets.

See shadcn/ui.