Top des librairies de composants headless pour React en 2024

Publié le 25 mars 2024
Baptiste Drillien avatar
Baptiste Drillien
Développeur front-end

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.

Consulter le code
Le code de cet article est disponible, vous pouvez le consulter sur GitHub.

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/semaineAuteurComposantsBundle Size
~ 6MWorkOS32Incré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/semaineAuteurComposantsBundle Size
~ 2MTailwind Labs102.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/semaineAuteurComposantsBundle Size
~ 220kAdobe353.08 MB

Lien : react-spectrum.adobe.com

hexa web logo
Hexa web
Des conseils pour un projet web ?
Nous contacter

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/semaineAuteurComposantsBundle Size
~ 32kChakra UI371000 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/semaineAuteurComposantsBundle Size
~ 45kRemix Team15Incré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/semaineAuteurComposantsBundle Size
~ 70kDiego Haz25250 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/semaineAuteurComposantsBundle Size
~ 5MMaterial UI143.04 MB

Lien : mui.com/base-ui

Échangeons sur votre projet web

Présentez-nous votre projet web, nous vous recontacterons dans les prochaines 24h.