UI kit : 8 kits d'interface et bibliothèques de composants comparés

Un UI kit, ou kit d'interface, réunit des éléments d'interface prêts à l'emploi : boutons, formulaires, menus, tableaux, couleurs, typographie, souvent des pages d'exemple. Selon l'outil, il prend la forme d'un fichier de design à copier dans Figma, d'une bibliothèque de composants à installer dans le code, ou des deux. Ce comparatif réunit des UI kits et bibliothèques de composants gratuits et payants, relevés sur les sites de leurs éditeurs en novembre 2026. Les outils de maquette dans lesquels on utilise ces kits sont rangés parmi les logiciels de prototypage, et les banques d'icônes complètent la plupart des kits ; l'ensemble fait partie des logiciels de design.

Qu'est-ce qu'un UI kit ?

Un UI kit évite de redessiner et de recoder les mêmes éléments à chaque projet. Côté design, c'est une bibliothèque de composants, de variantes et de styles (couleurs, espacements, polices) dans un outil comme Figma, avec des écrans d'exemple à adapter. Côté code, c'est un ensemble de composants prêts à intégrer, le plus souvent pour React ou pour Tailwind CSS. Les kits les plus complets fournissent les deux versions, alignées, ce qui limite les écarts entre maquette et produit.

UI kit ou design system : quelle différence

Le UI kit est une boîte à outils : des composants et des styles prêts à réutiliser. Un design system va plus loin : il ajoute les règles d'usage, la documentation, les principes et une gouvernance propres à une marque ou à un produit. Un UI kit peut servir de point de départ à un design system. Material UI, par exemple, se présente comme une base sur laquelle bâtir votre propre design system, et shadcn/ui comme une façon de construire votre propre bibliothèque de composants.

Les UI kits pour Figma et pour le code

Untitled UI

Untitled UI se présente comme le plus grand UI kit pour Figma et la plus grande collection de composants React. La version Figma compte plus de 10 000 composants et variantes, plus de 900 styles et variables, et plus de 420 exemples de pages ; la version React s'appuie sur Tailwind CSS et React Aria. Une version gratuite existe pour Figma, avec les styles et composants de base, et pour React, en open source. Les licences PRO se paient une fois, avec accès à vie et mises à jour, pour un nombre illimité de projets personnels et commerciaux.

Flowbite

Flowbite est une bibliothèque open source de composants d'interface basée sur Tailwind CSS : plus de 56 types de composants (boutons, menus, fenêtres modales, sélecteurs de date), mode sombre, JavaScript natif compatible TypeScript, avec un fichier de design Figma aligné sur les classes Tailwind. Le code publié est sous licence MIT ; la version Pro, sous licence propre, ajoute plus de 450 sections de site et composants avancés.

Preline UI

Preline UI est une bibliothèque de composants pour Tailwind CSS : la version open source donne plus de 640 composants et 189 blocs, pour un nombre illimité de projets et de développeurs, sous licences MIT et Fair Use. Son design system Figma est gratuit et se présente comme le plus grand du genre. Les offres Pro (224 €, un développeur) et Team (413 €, jusqu'à 15 développeurs) donnent un accès à vie à plus de 780 blocs et 21 modèles, sans droit de redistribution ; la TVA peut s'ajouter selon le pays.

daisyUI

daisyUI est un plugin pour Tailwind CSS qui ajoute des noms de classes pour les composants courants (btn, card, toggle…) : 68 composants en CSS pur, sans dépendance JavaScript, utilisables avec tous les frameworks, et des thèmes personnalisables. La bibliothèque est gratuite et open source. Une bibliothèque Figma officielle, vendue de 49 à 399 dollars selon l'offre, reprend tous ses composants et variantes.

UI8

UI8 n'est pas un kit unique mais une place de marché : plus de 14 800 ressources vendues par des créateurs, dont des UI kits pour Figma et Sketch, des modèles codés en React ou en HTML, des modèles Framer et Webflow, des icônes et des polices. Les produits s'achètent à l'unité ; l'abonnement All Access ouvre tout le catalogue pour 188 dollars par trimestre, 368 dollars par an ou 570 dollars une fois, montants barrés pendant une vente Black Friday.

Les bibliothèques de composants open source pour React

shadcn/ui

shadcn/ui réunit des composants accessibles et un système de distribution de code : au lieu d'installer un paquet, vous copiez le code des composants dans votre projet avec un outil en ligne de commande, puis vous le modifiez librement. Le projet est sous licence MIT. Les fichiers Figma qui reprennent ses composants, gratuits ou payants, sont fournis par la communauté.

Material UI

Material UI, de MUI, est une bibliothèque open source de composants React qui applique le Material Design de Google ; elle existe depuis 2014 et réunit plus de 2 500 contributeurs. Le cœur est gratuit, sous licence MIT. Les Design Kits pour Figma sont payants, avec une licence par éditeur, et les composants avancés MUI X (grilles de données, graphiques, planning) passent par une licence commerciale, Pro à 299 dollars par an et par développeur.

Ant Design

Ant Design est un langage de design et une bibliothèque React, antd, conçus pour les applications web d'entreprise par Ant Group et sa communauté. Ses composants sont écrits en TypeScript, traduits dans des dizaines de langues et personnalisables par thème ; le projet est sous licence MIT. Les ressources de design officielles sont pour Sketch, et des kits Figma existent chez des tiers.

Comparatif des UI kits : design, code, licence et prix

UI kit gratuit ou payant : ce que change la licence

Les versions gratuites suffisent souvent pour démarrer : la licence MIT de Flowbite, shadcn/ui, Material UI ou Ant Design autorise un usage commercial. Les versions payantes ajoutent surtout des composants avancés et des pages d'exemple. Leur licence fixe deux limites à vérifier : combien de personnes elle couvre (un seul pour Untitled UI PRO SOLO et Preline Pro, par éditeur pour les Design Kits de MUI) et la redistribution, interdite chez Preline Pro dans un thème ou un générateur. Le modèle de paiement varie aussi : achat unique avec accès à vie chez Untitled UI et Preline, licence annuelle ou perpétuelle par développeur pour MUI X.

Avantages, limites et kit sur mesure

• Gain de temps et cohérence : composants, variantes et styles existent déjà, dans la maquette comme dans le code.

• Accessibilité : shadcn/ui, Untitled UI React (avec React Aria) et Material UI mettent en avant des composants accessibles, à vérifier sur votre propre produit.

• Limite : un kit généraliste donne un rendu proche d'autres produits construits avec lui ; il faut l'adapter à votre marque.

• Kit sur mesure : pour une identité forte, partir d'un kit puis le transformer en design system propre à l'équipe évite de tout dessiner.

Choisir un UI kit selon votre projet, web ou mobile

• Un site ou une application web en Tailwind CSS : Flowbite, Preline UI ou daisyUI.

• Une application React avec maquettes Figma alignées : Untitled UI, ou Material UI avec ses Design Kits.

• Un code entièrement modifiable : shadcn/ui, dont les composants vivent dans votre projet.

• Une application métier riche en tableaux et formulaires : Ant Design, ou Material UI avec MUI X.

• Une application mobile : vérifiez que le kit couvre les écrans mobiles ; Ant Design publie par exemple une déclinaison, Ant Design Mobile.