Interface Pro avec shadcn-ui

1. Lancer l'initialisation dans le terminal du projet : npx shadcn@latest init. La CLI pose quelques questions (style de base, palette, support TypeScript). Les réponses par défaut conviennent pour démarrer.

2. La CLI fait son travail. Tailwind est installé s'il manquait. Un fichier components.json apparaît à la racine — c'est la configuration de shadcn dans votre projet. Un dossier components/ui/ est créé pour accueillir les composants.

3. Ajouter le premier composant : npx shadcn@latest add button. Le fichier components/ui/button.tsx apparaît. Vous pouvez l'ouvrir : c'est du code lisible, pas une boîte noire.

4. Importer et utiliser dans une page React (par exemple app/page.tsx) : import { Button } from '@/components/ui/button', puis <Button>Cliquer</Button>. Lancer le serveur (npm run dev), voir le bouton sobre, accessible, fonctionnel.

/* app/globals.css */

@layer base {
  :root {
    --primary: 15 65% 41%;        /* terre cuite */
    --primary-foreground: 40 30% 96%; /* ivoire */
    --background: 40 30% 96%;     /* fond ivoire */
    --foreground: 40 8% 10%;      /* texte encre */
    --accent: 160 12% 35%;        /* sage */
    --ring: 15 65% 41%;            /* focus terre cuite */
  }
}