Interface Pro avec Shadcn
À l'issue de cette leçon, le stagiaire installe et utilise shadcn/ui pour assembler une interface React professionnelle en quelques minutes.
Le principe shadcn/ui
shadcn/ui n'est pas une bibliothèque de composants au sens traditionnel. C'est un catalogue de composants React, sobres et accessibles, dont vous copiez le code source dans votre projet. Vous ne les installez pas comme une dépendance npm ; vous les incorporez.
L'avantage : vous restez propriétaire du code, vous pouvez l'adapter à votre charte sans contourner une API rigide, et vous évitez la dépendance à un éditeur tiers qui pourrait abandonner sa bibliothèque ou changer son modèle de licence. C'est une posture proche de l'esprit open source classique : du code qu'on lit, qu'on comprend, qu'on modifie.
Pré-requis
shadcn/ui s'appuie sur trois fondations : React (le framework de composants), Tailwind CSS (les utilitaires de style), et Radix UI (les primitives accessibles). La CLI shadcn installe automatiquement les pièces manquantes au moment où vous ajoutez un composant.
Pour un projet Next.js ou Vite déjà en place, l'intégration prend quelques minutes. Pour un projet HTML statique, shadcn n'est pas adapté ; restez sur du HTML/CSS direct ou passez à une stack React si vous voulez en bénéficier.
Premiers composants utiles
Pour la plupart des projets, une demi-douzaine de composants couvre 80 % des besoins :
Button, Input, Form pour les formulaires.
Card, Dialog, Sheet pour les structures de page.
Table, Tabs, Toast pour les interactions courantes.
Installez-les au fur et à mesure de vos besoins, pas tous d'un coup. Chaque composant que vous ajoutez sans l'utiliser pollue votre projet.
Mise en place sur un projet existant
Suppose un projet Next.js ou Vite + React. Pour HTML pur, shadcn n'est pas adapté.
-
Dans le terminal, à la racine du projet :
npx shadcn@latest init. La CLI pose quelques questions (style de base, palette, support TypeScript) — réponses par défaut conviennent pour démarrer. -
La CLI installe Tailwind si absent, crée un fichier
components.json, et prépare l'arborescencecomponents/ui/. -
Ajouter votre premier composant :
npx shadcn@latest add button. Le fichiercomponents/ui/button.tsxapparaît, lisible et modifiable. -
Importer le composant dans une page :
import { Button } from '@/components/ui/button'puis<Button>Cliquer</Button>. Vérifier le rendu. -
Pour adapter à votre charte : éditer
app/globals.cssou équivalent — les variables CSS de Tailwind y vivent. Modifier les valeurs par défaut--primary,--background,--foregroundpour faire correspondre à votre palette YOAT.
Refaire un écran de votre app avec shadcn
Choisissez un écran existant de votre application (ou un nouveau à concevoir). Recomposez-le avec quatre à six composants shadcn. Comparez le rendu avant/après en termes de cohérence visuelle, accessibilité et temps de développement.
- ui.shadcn.com site officiel shadcn/ui, catalogue et documentation
- code.claude.com documentation Claude Code
Vous savez ajouter et personnaliser des composants shadcn ?