Qu’est-ce que shadcn/ui ? Comprendre son rôle, ses avantages et son utilisation dans les applications React modernes

Les projets React modernes doivent souvent trouver un équilibre difficile : utiliser une bibliothèque d’interface préconstruite, rapide mais peu flexible, ou concevoir leur propre système, flexible mais long à réaliser ? C’est là qu’intervient shadcn/ui, une nouvelle approche du développement d’interfaces qui vous donne un contrôle complet sur le code tout en offrant la finition d’une bibliothèque de composants mature.

Ce guide présente shadcn/ui, les raisons de sa popularité auprès des développeurs React et Next.js, et son utilisation pour accélérer le travail d’interface sans perdre en flexibilité.

Qu’est-ce que shadcn/ui ?

shadcn/ui, souvent simplement écrit shadcn, n’est pas un paquet npm traditionnel ni une bibliothèque de composants à thèmes comme Material UI ou Chakra UI. Il s’agit d’une collection de composants React open source de grande qualité, construits avec :

• Tailwind CSS pour les styles
• Radix UI pour les primitives accessibles sans styles prédéfinis
• Lucide Icons pour des icônes SVG épurées et cohérentes

Voici la particularité :

Au lieu de l’installer comme dépendance, vous copiez le véritable code source de chaque composant dans votre propre projet.

Chaque bouton, boîte de dialogue ou menu déroulant se trouve donc dans votre code. Vous pouvez le modifier, adapter son thème et le versionner vous-même.

Vous pouvez le voir comme un générateur de composants ou un kit de démarrage d’interface, plutôt qu’une dépendance.

Comment cela fonctionne

Le projet shadcn/ui fournit un outil en ligne de commande qui génère directement les composants dans votre projet :

npx shadcn-ui@latest add button

Cette commande télécharge un composant Button accessible et préconstruit, puis l’ajoute dans votre dossier local components/ui/. Vous pouvez ensuite le personnaliser, modifier ses classes Tailwind, ajuster ses variantes ou l’adapter à votre système de conception.

Chaque composant repose simplement sur React, Tailwind et Radix, sans logique cachée ni dépendance d’exécution.

Pourquoi les développeurs utilisent shadcn/ui

1. Maîtrise complète du code

Contrairement aux bibliothèques d’interface qui reposent sur des dépendances opaques, shadcn vous donne le code source complet du composant. Vous pouvez :

• Modifier directement les styles
• Ajouter des props ou des variantes
• Intégrer une logique personnalisée, comme l’analyse d’usage ou les autorisations

Votre interface suit vos règles. Vous n’attendez pas que les mainteneurs fusionnent une demande de modification.

2. Des fondations éprouvées

Chaque composant utilise :

• Tailwind CSS → Des styles centrés sur les utilitaires
• Radix UI → Des primitives de base accessibles sans styles prédéfinis
• Lucide Icons → Des icônes SVG modernes
• clsx / tailwind-variants → Une gestion claire des classes conditionnelles

Les composants sont ainsi accessibles et prêts pour la production, avec les bonnes pratiques des systèmes de conception intégrées dès le départ.

3. Cohérence et rapidité

Vous disposez d’un point de départ harmonieux et soigné pour l’interface :

• Espacements, typographie et couleurs cohérents
• Mode sombre et thèmes via les variables CSS
• Motifs de disposition et d’interaction prêts à l’emploi : menus déroulants, fenêtres modales et infobulles

Vous pouvez livrer des interfaces qui semblent réellement conçues, sans réinventer chaque composant.

4. Aucune dépendance à un fournisseur

Comme les composants sont simplement du code, vous pouvez :

• En créer vos propres versions
• Les remplacer
• Les associer à d’autres bibliothèques

Si shadcn/ui change ou ne répond plus à vos besoins, vos composants vous appartiennent toujours entièrement.

Composants courants et exemples

Voici quelques composants populaires de shadcn/ui et leur utilisation.

Exemple 1 : bouton

import { Button } from '@/components/ui/button'

export default function Example() {
  return (
    <div className="space-x-2">
      <Button>Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Delete</Button>
    </div>
  )
}

Ses points forts :

• Des variantes intégrées comme outline, destructive et ghost.
• Des thèmes entièrement personnalisables grâce aux variables de conception de Tailwind.
• Une personnalisation suffisamment simple pour préserver la cohérence.

Comprendre les variantes du bouton

Lorsque vous exécutez :

npx shadcn-ui@latest add button

L’outil crée un fichier button.tsx dans components/ui/, généralement sous cette forme :

// components/ui/button.tsx
import * as React from 'react'
import { cva } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 rounded-md px-3',
        lg: 'h-11 rounded-md px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

function Button({ className, variant, size, ...props }: ButtonProps) {
  return <button className={cn(buttonVariants({ variant, size, className }))} {...props} />
}

export { Button, buttonVariants }

Que sont donc outline, destructive et ghost ?

Ce sont des variantes de style prédéfinies dans cette configuration buttonVariants. Vous n’avez pas à les définir manuellement. Elles sont incluses par défaut dans le composant généré.

Chaque variante correspond à un ensemble différent de classes Tailwind :

Ainsi, lorsque vous écrivez :

<Button variant="destructive">Delete</Button>

Vous demandez au composant Button d’utiliser le style de danger rouge, car cette variante correspond à bg-destructive et text-destructive-foreground.

Que sont les « variables de conception Tailwind » ?

Les « design tokens » sont des variables nommées de couleur et d’espacement utilisées dans tout le thème. Dans shadcn/ui, elles sont définies dans globals.css ou tailwind.config.js, par exemple :

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  /* etc. */
}

Tailwind les référence ensuite comme des variables de conception avec la syntaxe theme() ou des raccourcis de classes :

className = 'bg-primary text-primary-foreground hover:bg-primary/90'

Ces variables :

• Maintiennent la cohérence des couleurs entre les composants.
• Prennent automatiquement en charge le mode sombre via les variables CSS.
• Permettent aux concepteurs et développeurs de partager un vocabulaire visuel, par exemple « primary », « accent » ou « destructive », plutôt que des codes hexadécimaux bruts.

Pourquoi c’est utile

• Vous pouvez facilement ajouter ou modifier des variantes, comme success et warning, dans le même fichier button.tsx.
• L’interface reste cohérente visuellement puisque toutes les variantes utilisent des variables de conception partagées.
• La modification du thème, des couleurs ou des espacements actualise instantanément tous les composants.
• L’ensemble est flexible : utilisez les variantes intégrées ou étendez-les selon votre identité visuelle.

À retenir : Ces variantes, comme outline, destructive et ghost, sont des styles préconstruits fondés sur des variables de conception, que vous pouvez étendre ou remplacer. Elles contribuent à rendre les composants shadcn/ui prêts pour la production dès le départ, cohérents, adaptés au thème et faciles à personnaliser.

Exemple 2 : boîte de dialogue modale

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Confirm Action</DialogTitle>
        </DialogHeader>
        <p>This action cannot be undone.</p>
      </DialogContent>
    </Dialog>
  )
}

Son point fort : La boîte de dialogue utilise les primitives Radix en interne. Elle est donc accessible au clavier, compatible avec les lecteurs d’écran et adaptative dès le départ.

Exemple 3 : champ de saisie et composants de formulaire

import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

export default function LoginForm() {
  return (
    <form className="space-y-4">
      <div>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="you@example.com" />
      </div>
      <Button type="submit">Login</Button>
    </form>
  )
}

Un résultat épuré, minimal et facile à étendre pour une page d’authentification ou de paramètres.

Quand utiliser shadcn/ui et quand l’éviter ?

✅ Utilisez-le lorsque

• Vous créez un produit personnalisé, SaaS, tableau de bord ou application, et souhaitez rapidement une interface cohérente.
• Vous avez besoin d’un contrôle complet sur la conception et l’accessibilité.
• Vous utilisez déjà Tailwind CSS et Next.js.

❌ Évitez-le lorsque

• Vous préférez un système de conception prêt à intégrer, comme MUI ou Chakra UI.
• Vous n’utilisez pas Tailwind, auquel il est étroitement lié.
• Vous voulez avancer extrêmement vite sans toucher au code des composants.

Bien démarrer : configuration rapide

1. Installez Tailwind CSS, si ce n’est pas déjà fait :

   Copier le code

   npx create-next-app my-app
   cd my-app
   npx tailwindcss init -p
   

2. Initialisez shadcn/ui

   Copier le code

   npx shadcn-ui@latest init
   

3. Ajoutez des composants

   Copier le code

   npx shadcn-ui@latest add button card dialog input
   

4. Importez et personnalisez Vos nouveaux composants apparaissent dans components/ui/.

🧩 shadcn et les autres bibliothèques d’interface

Points clés

• shadcn/ui est un modèle de composants à copier et à maîtriser, plutôt qu’un paquet.
• Il offre un contrôle réel, aucune dépendance imposée et une excellente expérience développeur.
• Construit avec Tailwind, Radix et les approches modernes de React, il convient aux équipes qui souhaitent une base de conception claire, accessible et extensible.

C’est le juste milieu entre « tout construire soi-même » et « dépendre d’une lourde bibliothèque d’interface ».