Qu'est-ce que shadcn/ui ? Guide de comparaison avec MUI, Chakra et autres bibliothèques

Chapeau : Le mois dernier, en reprenant un ancien projet, j’ai ouvert le package.json et vu Material-UI 5.x — mon cœur a fait un bond. Ce n’est pas que MUI soit mauvais, mais ce projet devait avoir un design qui « ne ressemble absolument pas à Material Design ». Je me suis dit : encore une bataille avec le système de thème MUI. Puis j’ai repensé à shadcn/ui — cette bibliothèque qui m’avait fait dire « enfin, c’est exactement ce qu’il me fallait » dès la première utilisation.

I. shadcn/ui : une bibliothèque de composants qui n’en est pas une

1.1 La philosophie Copy & Own

shadcn/ui est intéressant : ce n’est tout simplement pas un paquet npm.

Vous ne verrez pas de commande du type npm install shadcn-ui. À la place, vous recevez du code de composants à copier directement dans votre projet. Copier, coller — et ce code devient le vôtre.

Franchement, j’étais assez sceptique la première fois : copier du code dans mon projet, ça ne va pas créer le chaos ?

En pratique, j’ai découvert que c’est vraiment malin.

Le modèle des bibliothèques traditionnelles : installer le paquet → importer les composants → configurer les styles via props et theme → dès qu’il faut personnaliser, on « contourne » — wrapper les composants, surcharger les styles, empiler des workarounds.

shadcn/ui coupe court à tout ça. Besoin de modifier quelque chose ? Modifiez directement le code du composant. Le code est dans votre projet, pas de « boîte noire ».

1.2 Architecture technique : un gâteau à trois étages

La stack de shadcn/ui repose sur trois couches :

Couche basse : Radix UI

Un ensemble de primitives de composants « sans style ». Sans style, ça veut dire : Radix gère le comportement et l’accessibilité, pas l’apparence. Pour un composant Dialog, Radix s’occupe de :

• l’état ouvert/fermé
• la gestion du focus (navigation au clavier Tab)
• les attributs ARIA (support lecteur d’écran)
• les interactions clavier (Échap pour fermer)

Mais le style ? Rien du tout. Une page blanche.

Couche intermédiaire : Tailwind CSS

Radix fournit le squelette, Tailwind la peau. Chaque composant shadcn/ui est stylé avec des utility classes Tailwind. Vous modifiez ces classes directement, sans rien « surcharger ».

Couche supérieure : vos modifications

C’est l’essence de shadcn/ui. Le code des composants est entre vos mains ; vous les adaptez comme vous voulez. Pas de limite d’API, pas de coin inaccessible aux props.

// Composant Button shadcn/ui (le code est dans votre projet)
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)

// Vous voulez modifier ? Allez-y
// Par exemple, ajouter une animation personnalisée
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={cn(
          buttonVariants({ variant, size, className }),
          "transition-all duration-300 hover:scale-105" // ajout direct
        )}
        ref={ref}
        {...props}
      />
    )
  }
)

Vous voyez ? Pas besoin de prop sx, ni de styled() — il suffit de modifier les classes.

1.3 Avantage performance : les chiffres ne mentent pas

L’avantage performance de shadcn/ui est vraiment net.

J’ai vérifié les données sur Bundlephobia :

Pourquoi shadcn/ui est si léger ? Parce que seuls les composants utilisés entrent dans votre bundle. Et pas de surcoût runtime du CSS-in-JS — les styles Tailwind sont traités à la compilation.

Sur un projet moyen migré de MUI vers shadcn/ui, le bundle est passé d’environ 1,2 Mo à 600 Ko. L’écart est net.

1.4 Le prix à payer : la maintenance vous incombe

shadcn/ui n’est pas parfait.

Le code est entre vos mains, donc la responsabilité de maintenance aussi.

Alibaba Cloud - Choix n°1 des développeurs, 15 % de réduction exclusive sur Lighthouse

Obtenir -15 % →Pub

MUI publie une nouvelle version qui corrige des failles de sécurité ? Un npm update suffit. Avec shadcn/ui, vous devez fusionner manuellement les changements upstream dans vos composants.

Ce n’est ni énorme ni négligeable. Sur un petit projet, ça va ; sur un grand projet où vous avez beaucoup modifié les composants, fusionner les mises à jour upstream devient un travail de longue haleine.

De plus, shadcn/ui n’a pas encore de « composants avancés » — DataGrid, Charts, sélecteurs de date complexes. Il faut chercher des bibliothèques tierces ou les écrire vous-même.

II. Les trois géants des bibliothèques traditionnelles

shadcn/ui est le nouveau venu ; regardons d’abord les « anciens ».

2.1 Material-UI : le choix entreprise par excellence

Material-UI (maintenant MUI) date de 2014 — la bibliothèque de composants la plus ancienne de l’écosystème React.

Ses avantages sont évidents :

Richesse de composants inégalée. DataGrid, Charts, Date Picker, TreeView, Autocomplete… Presque tous les composants entreprise que vous imaginez y sont. Sur un projet, les composants Pro de MUI nous ont fait gagner environ deux mois de développement.

Design system mature. Les spécifications Material Design de Google, fichiers Figma complets — la collaboration designer/développeur est fluide.

Écosystème solide. Des tonnes de questions MUI sur Stack Overflow ; en cas de blocage, on trouve presque toujours une réponse. Templates officiels, marketplace de thèmes — les ressources abondent.

Mais les problèmes aussi :

Bundle volumineux. 335 Ko pour le cœur, même si vous n’utilisez que quelques composants, le paquet de base reste là. Le tree-shaking aide, mais ne règle pas tout.

Personnalisation difficile. Si votre design s’éloigne beaucoup de Material Design, c’est pénible. Sur un projet où la maquette ne ressemblait pas du tout à Material, nous avons passé une semaine sur la config de thème et les surcharges de styles — le code s’empilait, la maintenance devenait un cauchemar.

Style Material difficile à effacer. Même en changeant couleurs et polices, la « saveur Material » persiste. L’effet ripple des boutons, l’ombre des cartes, l’animation des champs… autant de détails qui rappellent Material Design.

// Button MUI — contrôle via variant et color
<Button variant="contained" color="primary">
  Cliquez-moi
</Button>

// Personnalisation totale ? Il faut faire ainsi
<Button
  sx={{
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  }}
>
  Bouton personnalisé
</Button>

2.2 Chakra UI : roi de l’expérience développeur

Chakra UI est arrivé plus tard, mais l’expérience de développement est excellente.

Son principe : l’accessibilité (a11y) est par défaut, pas en option. Chaque composant intègre WAI-ARIA, navigation clavier, gestion du focus, support lecteur d’écran — prêt à l’emploi.

Développement rapide. Les style props de Chakra permettent d’écrire le style comme des attributs HTML :

// Syntaxe Chakra UI — styles directement dans les props
<Box bg="tomato" p={4} borderRadius="md" boxShadow="lg">
  <Text fontSize="xl" fontWeight="bold" color="white">
    Hello World
  </Text>
</Box>

Idéal pour prototyper vite, sans fichier CSS dédié.

Système de thème simple. Un fichier de config de thème unifie couleurs, polices et espacements. Le mode sombre se active en une ligne.

Limites toutefois :

React uniquement. Vous êtes sur Vue ou Svelte ? Chakra n’est pas pour vous.

Moins de composants. Comparé à MUI, la bibliothèque Chakra est plus légère, surtout pour les composants de données complexes — il faut chercher des tiers.

Styles au runtime. Chakra calcule les styles à l’exécution, avec un léger surcoût. Imperceptible dans la plupart des projets, mais potentiel goulot sur des scénarios à mises à jour très fréquentes (tableaux de bord temps réel).

2.3 Ant Design : standard des entreprises chinoises

Ant Design vient d’Alibaba et est très répandu en Chine.

Composants entreprise complets. Tableaux, formulaires, upload, arborescences… couvre presque tous les cas d’usage entreprise. Le composant Table est particulièrement puissant — tri, filtres, pagination, colonnes fixes, défilement virtuel, tout y est.

Bonne internationalisation. Plus de vingt langues intégrées, pratique pour les projets multilingues.

Documentation en chinois. Un avantage énorme pour les équipes locales. Documentation détaillée, nombreux tutoriels, communauté chinoise active.

Personnalisation plus faible. Le langage visuel Ant Design est marqué ; un autre style est difficile à obtenir. Le système de styles repose sur Less, alors que la plupart des projets passent à Tailwind — l’intégration est un peu maladroite.

III. Comparaison approfondie : sept dimensions

Les caractéristiques seules ne suffisent pas ; voici une comparaison concrète.

3.1 Taille du bundle

Données mesurées (Bundlephobia et projets réels) :

Pourquoi shadcn/ui est si petit ?

1. Pas de paquet cœur — seuls les composants utilisés sont empaquetés
2. Pas de runtime CSS-in-JS
3. Purge Tailwind à la compilation — les styles inutilisés sont supprimés

Sur un projet moyen, migrer de MUI vers shadcn/ui réduit le bundle d’environ 40 à 50 % en moyenne. Sur mobile, la différence compte.

3.2 Flexibilité de personnalisation

C’est le plus grand avantage de shadcn/ui.

Railway - Plateforme de déploiement moderne, sans opérations complexes, en ligne en quelques minutes

Commencer →Pub

shadcn/ui : le source est entre vos mains ; modifiez ce que vous voulez. Plus de « cette prop existe-t-elle ? », « comment surcharger ce style ? » — modifiez directement le code.

MUI : personnalisation via theme et prop sx. Puissant, mais on a toujours l’impression de « contourner ». Le système de theme a aussi sa courbe d’apprentissage.

Chakra UI : style props flexibles, mais la personnalisation profonde reste limitée. Certains composants sont complexes en interne ; les props seules ne suffisent pas.

Ant Design : personnalisation la plus faible. Variables de thème limitées. Changer complètement l’identité visuelle ? Préparez-vous à réécrire beaucoup de styles.

3.3 Expérience de développement

Courbe d’apprentissage :

• Chakra UI : la plus douce. Documentation claire, API simple, prise en main rapide.
• MUI : moyenne. Beaucoup de composants et d’API à assimiler.
• Ant Design : moyenne à raide. Composants complexes, nombreuses options de config.
• shadcn/ui : la plus raide. Il faut comprendre Radix, maîtriser Tailwind, s’habituer à modifier le code des composants.

Qualité de la documentation :

• MUI : très détaillée, nombreux exemples, API complète.
• Chakra UI : concise et claire, exemples pratiques.
• Ant Design : documentation chinoise complète, avec guide de design.
• shadcn/ui : en amélioration, mais encore plus légère que les trois autres.

Support communautaire :

• MUI : la plus grande communauté, le plus de questions Stack Overflow, ressources tierces abondantes.
• Ant Design : communauté chinoise active, ressources en chinois.
• Chakra UI : communauté moyenne, en forte croissance.
• shadcn/ui : jeune mais en croissance rapide ; les stars GitHub approchent déjà MUI.

3.4 Accessibilité

Point important, à ne pas négliger.

Chakra UI : la meilleure accessibilité. WAI-ARIA intégré, navigation clavier solide, lecteurs d’écran bien pris en charge. Pour des exigences a11y strictes, Chakra est le premier choix.

shadcn/ui : basé sur Radix UI, très bon aussi. Les primitives Radix sont conçues pour l’a11y — ARIA et gestion du focus bien gérés.

MUI : correct, la plupart des composants respectent WAI-ARIA.

Ant Design : niveau moyen. Composants de base corrects ; navigation clavier incomplète sur certains composants complexes.

3.5 Richesse des composants

MUI : le plus riche. Composants de base + avancés (DataGrid, Charts, Date Picker, Tree View, etc.). Les composants Pro x-grid et x-date-pickers sont payants, mais très puissants.

Ant Design : très riche. Table, Form, Upload et autres composants entreprise — largement suffisant.

Chakra UI : moyen. Composants de base présents, peu de composants avancés — tiers nécessaires.

shadcn/ui : le plus limité. Pour l’instant surtout des composants de base (Button, Input, Dialog, Table, etc.), pas de DataGrid ni Charts. La communauté complète avec des extensions basées sur shadcn.

3.6 Maintenabilité à long terme

Deux angles :

Mise à jour automatique vs manuelle :

• MUI / Chakra / Ant Design : npm update pour nouvelles fonctionnalités et correctifs.
• shadcn/ui : fusion manuelle des mises à jour upstream.

Contrôle vs commodité :

• Bibliothèques traditionnelles : commodité élevée, contrôle limité. Bug ou personnalisation → attendre la correction officielle ou fork.
• shadcn/ui : contrôle maximal, coût de maintenance à votre charge. Avantage : vous corrigez vous-même, sans attendre.

Coût de migration :

Migrer d’une bibliothèque à une autre coûte cher dans tous les cas. Choisissez avec soin — c’est un engagement long terme.

3.7 Scénarios d’usage

IV. Cadre de décision

Comment choisir ? Voici un flux de décision simple :

4.1 Trois questions à se poser

Question 1 : Votre design est-il très « unique » ?

• Design entièrement personnalisé, sans ressemblance avec un design system existant → shadcn/ui
• Design proche de Material Design → MUI
• Design moderne et épuré, sans personnalisation poussée → Chakra UI
• Style entreprise, beaucoup de tableaux et formulaires → Ant Design

Question 2 : Quelle est la taille du projet ?

• Petit projet / MVP → Chakra UI ou shadcn/ui
• Application entreprise moyenne à grande → MUI ou Ant Design
• Sensible aux performances (mobile, fort trafic) → shadcn/ui

Question 3 : Que maîtrise votre équipe ?

• Équipe familière avec Tailwind → shadcn/ui s’intègre naturellement
• Équipe familière avec Material Design → MUI
• Équipe qui privilégie la vitesse de développement → Chakra UI
• Équipe entreprise en Chine → Ant Design

4.2 Mon avis personnel

Pour un nouveau projet :

Mon choix par défaut aujourd’hui est shadcn/ui.

Raisons :

• Tailwind est devenu standard ; shadcn/ui s’y adapte parfaitement
• Meilleures performances, bundle le plus petit
• Contrôle total, pas de « boîte noire »
• Maintenance long terme plus maîtrisable (le code est chez vous)

Exceptions :

• Tableaux ou graphiques complexes, pas le temps de chercher des tiers → MUI
• Accessibilité stricte, équipe peu à l’aise avec l’a11y → Chakra UI
• Grand projet entreprise en Chine, doc et support locaux requis → Ant Design

Pour un projet existant :

Vultr - Serveur cloud NVMe haute performance, 32 emplacements mondiaux, déploiement Docker en un clic

Voir les tarifs →Pub

La migration coûte cher ; sans raison claire (performance, personnalisation difficile, changement de design system), ne changez pas. Si vous migrez quand même, shadcn/ui a un coût relativement bas — composants indépendants, remplacement progressif possible.

V. Migration en pratique : de MUI vers shadcn/ui

Si vous décidez de migrer, voici des retours d’expérience.

5.1 Étapes de migration

Étape 1 : Inventorier les composants existants

Listez les composants MUI utilisés :

• Button, Input, Select (base) → shadcn les a, remplacement direct
• DataGrid, Charts (avancés) → bibliothèques tierces ou implémentation maison

Étape 2 : Table de correspondance

// Table de mapping
const componentMap = {
  'Button': 'Button',          // correspondance directe
  'TextField': 'Input',        // nom différent, fonction similaire
  'Dialog': 'Dialog',          // correspondance directe
  'Select': 'Select',          // correspondance directe
  'Table': 'Table',            // Table de base shadcn, sans fonctions avancées
  'DataGrid': '???'            // chercher un remplaçant (ex. TanStack Table)
}

Étape 3 : Remplacement progressif

Ne tout remplacez pas d’un coup. Commencez par une page, validez, puis étendez.

Étape 4 : Migration des styles

Variables de thème MUI → config Tailwind
prop sx → classes Tailwind

// Syntaxe MUI
<Button sx={{ mt: 2, mb: 1, backgroundColor: 'primary.main' }}>
  Envoyer
</Button>

// Syntaxe shadcn/ui
<Button className="mt-8 mb-4 bg-primary">
  Envoyer
</Button>

5.2 Points d’attention

1. Systèmes de styles différents : MUI utilise theme object + prop sx, shadcn des classes Tailwind. Il faut « traduire » les styles.

2. Composants avancés : shadcn n’a pas de DataGrid prêt à l’emploi — TanStack Table est recommandé. Pour les graphiques : Recharts ou Chart.js.

3. Animations : les effets ripple et transitions MUI sont intégrés ; avec shadcn, à ajouter vous-même via transition et classes animate- Tailwind.

4. Tester ! Tester ! Tester ! Après migration, testez toutes les interactions, surtout formulaires et modales.

5.3 Coût de migration (référence)

Mon expérience :

• Petit projet (10 pages ou moins) : 1 à 2 semaines
• Projet moyen (10 à 30 pages) : 2 à 4 semaines
• Grand projet (30+ pages) : 4 à 8 semaines, selon la complexité des composants avancés

VI. Synthèse et perspectives

En résumé, un seul message :

Il n’y a pas de meilleure bibliothèque — seulement celle qui vous convient le mieux.

shadcn/ui ouvre une voie nouvelle : non pas « utiliser une lib », mais « posséder le code ». Pour les équipes qui visent performance et personnalisation, c’est un attrait majeur.

MUI, Chakra UI et Ant Design ont chacun leurs forces : richesse et maturité MUI, expérience développeur et accessibilité Chakra, capacités entreprise et support local Ant Design.

La clé : connaître vos besoins, comprendre chaque bibliothèque, choisir ce qui convient à votre projet actuel.

Si vous hésitez encore, un conseil :

Essayez shadcn/ui.

Vraiment — une prise en main suffit pour sentir à quel point l’approche diffère des bibliothèques traditionnelles. Avoir le code entre les mains, c’est satisfaisant.

Ressources

Documentation officielle :

• Documentation officielle shadcn/ui
• Documentation officielle Material-UI (MUI)
• Documentation officielle Chakra UI
• Documentation officielle Ant Design

Articles comparatifs :

• Chakra UI vs Material UI – UXPin
• Shadcn vs Material UI – shadcnstudio

Discussions communautaires :

• Reddit: What’s your go-to UI library for React in 2025?
• State of JS 2024 – React Libraries

Données GitHub (septembre 2025) :

• shadcn/ui : ~94,6k stars
• Material-UI : ~96,6k stars
• Chakra UI : ~39,7k stars
• Ant Design : ~96,0k stars

Cet article s’appuie sur des données et une expérience pratique de septembre 2025 à mars 2026. Les bibliothèques évoluent vite ; consultez la documentation la plus récente.