09 · Module 3 — Stack moderne

Interface Pro avec shadcn-ui

Des composants React professionnels, copiés dans votre projet,
100% sous votre contrôle.

5 minutesComposants ReactAccessible · Personnalisable

§01 · Ce qu'est shadcn-ui

Pas une bibliothèque, un catalogue

shadcn-ui est un catalogue de composants React construits sur Tailwind CSS et Radix UI. Ce qui le distingue de toutes les autres bibliothèques : vous ne l'installez pas comme dépendance. Vous copiez les composants dont vous avez besoin directement dans votre code source.

Philosophie

Vous possédez le code

Les composants sont copiés dans src/components/ui. Vous les modifiez comme vous voulez. Pas de dépendance à mettre à jour, pas de rupture de version.

Qualité

Accessible par défaut

Construit sur Radix UI, qui gère l'accessibilité (ARIA, navigation clavier, lecteurs d'écran) de façon rigoureuse.

Personnalisation

Tailwind natif

Tous les composants utilisent Tailwind CSS. Votre charte graphique s'applique en modifiant quelques variables de configuration.

Adoption

Dominant en 2025-2026

Téléchargé des dizaines de millions de fois par semaine. Claude connaît très bien shadcn-ui et génère du code qui l'utilise correctement.

§02 · Installation

Trois commandes pour démarrer

1.

Initialiser shadcn-ui dans votre projet. npx shadcn-ui@latest init. La CLI pose quelques questions (framework, thème, emplacement du dossier components, alias de chemins). Répondre selon votre configuration Next.js ou Vite.

2.

Ajouter votre premier composant. npx shadcn-ui@latest add button. Le composant Button est copié dans src/components/ui/button.tsx. C'est tout. Vous pouvez l'importer et l'utiliser.

3.

Ajouter les composants dont vous avez besoin. npx shadcn-ui@latest add card dialog input table select toast. Chaque composant est copié dans ui/. Claude Code sait les utiliser dès qu'ils sont dans votre projet.

§03 · Catalogue des composants disponibles

Les incontournables pour un dashboard

Navigation

Sidebar, Tabs, Breadcrumb

Navigation latérale, onglets, fil d'Ariane. Les briques de toute interface multi-section.

Données

Table, DataTable, Card

Tableau de données avec tri et pagination (DataTable), cartes de métriques (Card). Cœur d'un dashboard.

Formulaires

Input, Select, Form

Champs de saisie, listes déroulantes, formulaires avec validation intégrée (via React Hook Form).

Feedback

Toast, Alert, Dialog

Notifications (Toast), messages d'alerte, boîtes de dialogue de confirmation. L'UX de base.

§04 · Travailler avec Claude et shadcn-ui

Décrire l'interface, Claude génère

Une fois les composants copiés dans votre projet, vous pouvez demander à Claude Code de les assembler en interfaces complètes. Claude connaît l'API de chaque composant shadcn-ui et génère du code qui fonctionne.

Vous : Crée une page de tableau de bord avec :
  - En-tête avec titre et bouton "Nouvelle mission"
  - 3 cartes métriques en ligne (missions actives,
    CA en cours, délai moyen)
  - Tableau listant les dernières missions avec
    colonnes : client, statut, date, montant

→ Claude utilise Card, Table, Button de shadcn-ui
→ Génère une page React complète et fonctionnelle
→ Le style est cohérent avec votre charte Tailwind

Préciser les composants dans le CLAUDE.md

Ajoutez dans votre CLAUDE.md : « Stack UI : shadcn-ui + Tailwind CSS. Les composants disponibles sont dans src/components/ui. » Claude les utilisera systématiquement sans qu'on lui rappelle à chaque session.

§05 · Personnalisation de la charte

Vos couleurs en quelques lignes

shadcn-ui utilise des variables CSS pour les couleurs. Modifier votre charte graphique ne nécessite pas de toucher aux composants individuels — juste les variables dans un fichier central.

globals.css

Variables CSS centrales

Le fichier globals.css généré par shadcn-ui contient les variables : --primary, --secondary, --background, --foreground, etc. Modifier ces valeurs change l'apparence de tous les composants.

Thème Cabinet PEDETTI

Adapter aux chartes

Pour les clients ou projets avec une charte précise, demandez à Claude de traduire votre charte (couleurs HEX, polices) en variables CSS shadcn-ui.

Mode sombre

Intégré

shadcn-ui supporte le mode sombre nativement. Les variables ont des variantes light et dark. Activer le mode sombre en ajoutant la classe dark sur l'élément html.

Fin · Leçon 09 acquise

Cap sur la leçon 10

Votre stack est complète. Terminal, projet, VS Code, sécurité, Supabase, shadcn-ui. La leçon suivante aborde le développement assisté — mode plan appliqué au web.

Exercice — appropriation

Initialisez shadcn-ui sur votre projet de référence. Ajoutez les composants Button, Card, Input et Table. Demandez à Claude Code de générer une première page avec ces composants en décrivant ce qu'elle doit afficher. Évaluez la qualité du code généré et notez ce qui a besoin d'ajustement.

Quiz · Validation des acquis

Quiz · Interface Pro avec shadcn-ui

8 questions · une seule bonne réponse par question · vous pouvez recommencer autant de fois que nécessaire.

1 / 8

Question à choix multiple