Component libraries trends

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:

• mui
• vuetify
• SUID

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.

• Konsta UI
• daisyUI
• Sancho
• Framework7
• Vant
• Onsen UI
• mobileui

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

• tamagui
• paper
• RNUI
• magnus
• React Native UI Kitten
• gluestack-ui, successor for NativeBase

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:

• daisyUI
• Konsta UI
• NextUI
• Flowbite
• Material Tailwind
• preline
• ripple-ui
• tailwind-elements
• sailboatui

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.