Top des librairies de composants headless pour React en 2024
Comme nous l’avons mentionné dans notre guide pour comprendre comment choisir une library de composants UI avec React / Next.js, l’utilisation de composants headless s’avère être un choix très pertinent pour développer des applications web.
C’est pourquoi nous avons décidé de créer une liste qui regroupe les librairies de composants headless.
Cette liste tend vers l’exhaustivité, n’hésitez pas à faire une PR pour ajouter des librairies manquantes sur le repo.
1. Radix UI
Radix UI présente de nombreux avantages qui lui permettent de se hisser facilement en tête de ce classement. Accessible, évolutive, modifiable et incrémentable, cette librairie est rapidement devenue incontournable.
“ An open-source UI component library for building high-quality, accessible design systems and web apps. ”
Les chiffres clés
| DL/semaine | Auteur | Composants | Bundle Size |
|---|---|---|---|
| ~ 6M | WorkOS | 32 | Incrémental |
Lien : radix-ui.com
2. Headless UI
Développée par TailwindCSS, Headless UI propose un panel restreint mais abouti de composants headless facilement stylisable avec Tailwind.
“ Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. ”
Les chiffres clés
| DL/semaine | Auteur | Composants | Bundle Size |
|---|---|---|---|
| ~ 2M | Tailwind Labs | 10 | 2.06 MB |
Lien : headlessui.com
3. React Aria
Développée par Adobe, React Aria propose de nombreux composants accessibles pour créer les bases d’un design system.
“ A library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system. ”
Les chiffres clés
| DL/semaine | Auteur | Composants | Bundle Size |
|---|---|---|---|
| ~ 220k | Adobe | 35 | 3.08 MB |
Lien : react-spectrum.adobe.com
4. Ark UI
Disponible pour React, Vue, Solid et plus tard en 2024 Svelte, Ark UI se veut flexible quant au choix du framework que vous utilisez.
“ Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks. ”
Les chiffres clés
| DL/semaine | Auteur | Composants | Bundle Size |
|---|---|---|---|
| ~ 32k | Chakra UI | 37 | 1000 kB |
Lien : ark-ui.com
5. Reach UI
Avant tout orientée sur l’accessibilité de ses composants, Reach UI priorise les “best practices” pour faciliter le développement d’applications web user friendly.
“ Reach UI seeks to become the accessible foundation of your React-based design system. ”
Les chiffres clés
| DL/semaine | Auteur | Composants | Bundle Size |
|---|---|---|---|
| ~ 45k | Remix Team | 15 | Incrémental |
Lien : reach.tech
6. Aria Kit
Une collection de composants open source pour construire des applications web, design systems alliant accessibilité et personnalisation.
“ Open-source library with unstyled, primitive components, with a collection of styled examples ”
Les chiffres clés
| DL/semaine | Auteur | Composants | Bundle Size |
|---|---|---|---|
| ~ 70k | Diego Haz | 25 | 250 kB |
Lien : ariakit.org
7. Base UI
Initialement compris dans Material UI, Base UI est un package indépendant qui reprend les composants headless de Material UI. Prévue pour fin 2024, une version stable toujours propulsée par MUI apportera un panel de composants et de fonctionnalités élargi.
“ Base UI gives you a set of foundational "headless" components that you can build with using any styling solution ”
Les chiffres clés
| DL/semaine | Auteur | Composants | Bundle Size |
|---|---|---|---|
| ~ 5M | Material UI | 14 | 3.04 MB |
Lien : mui.com/base-ui