Aller au contenu principal

shadcn/ui

https://ui.shadcn.com/, une bibliothèque d'interface utilisateur pour React.

Shadcn UI

Notions théoriques​

shadcn/ui est une bibliothèque d'interface utilisateur (UI) moderne conçue pour React. Elle repose sur Radix UI comme base de composants et intègre Tailwind CSS pour la personnalisation visuelle. Cette bibliothèque se distingue par son approche modulaire : vous avez un contrôle total sur les composants, qui sont importés directement dans votre codebase.

Contrairement aux bibliothèques traditionnelles, où les composants sont souvent des "boîtes noires", shadcn/ui génère du code que vous pouvez modifier librement. Cela signifie qu’elle est idéale pour les développeurs cherchant un équilibre entre standardisation et flexibilité.

Pourquoi choisir shadcn/ui ?​

  1. Composants accessibles : shadcn/ui utilise Radix UI, garantissant des composants accessibles et conformes aux standards.
  2. Personnalisation complète : Grâce à Tailwind CSS, chaque composant est entièrement personnalisable.
  3. Pas de dépendance verrouillée : Les composants sont ajoutés directement à votre projet, vous ne dépendez donc pas de la bibliothèque à long terme.
  4. Open source : Maintenue par la communauté, elle évolue rapidement avec les besoins des développeurs.

Fonctionnement de shadcn/ui​

  1. Installation guidée : Les composants sont importés individuellement à l’aide d’un CLI.
  2. Approche modulaire : Seuls les composants nécessaires sont ajoutés, réduisant le poids global de l'application.
  3. Compatible avec Tailwind CSS : Vous pouvez appliquer vos classes Tailwind préférées ou étendre les styles existants.

Principaux composants disponibles​

  • Button : Boutons interactifs avec plusieurs variantes (primaire, secondaire, etc.).
  • Dialog : Fenêtres modales accessibles.
  • Dropdown : Menus déroulants entièrement personnalisables.
  • Tabs : Onglets dynamiques et stylisés.
  • Toast : Notifications légères et réactives.

Exemple basique : Un bouton​

Un bouton simple avec shadcn/ui ressemblerait à ceci :

import { Button } from "@/components/ui/button";

export default function App() {
  return <Button variant="primary">Cliquez ici</Button>;
}

Dans cet exemple :

  • Button est un composant de shadcn/ui.
  • variant="primary" applique un style spécifique (défini avec Tailwind CSS).

Exemple pratique​

Créer une fenêtre modale avec Dialog

Nous allons implémenter une fenêtre modale interactive.

Code​

import { useState } from "react";
import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription } from "@/components/ui/dialog";

export default function ExempleDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogTrigger asChild>
          <button className="btn">Ouvrir la fenêtre</button>
        </DialogTrigger>
        <DialogContent>
          <DialogTitle>Bienvenue</DialogTitle>
          <DialogDescription>
            Ceci est une fenêtre modale simple avec shadcn/ui.
          </DialogDescription>
          <button className="btn" onClick={() => setIsOpen(false)}>
            Fermer
          </button>
        </DialogContent>
      </Dialog>
    </div>
  );
}

Explications​

  1. Dialog : Le conteneur principal de la fenêtre modale.
  2. DialogTrigger : L’élément qui déclenche l’ouverture de la fenêtre.
  3. DialogContent : Le contenu principal de la fenêtre.
  4. DialogTitle et DialogDescription : Titre et description de la modale.
  5. useState : Gère l'état de la fenêtre (ouverte ou fermée).

Test de mémorisation/compréhension​


Quelle est la principale bibliothèque sous-jacente à shadcn/ui pour les composants ?


Pourquoi shadcn/ui est-il considéré comme modulaire ?


Quel outil est utilisé pour styliser les composants dans shadcn/ui ?


Comment importer un composant shadcn/ui dans votre projet ?


Quel est le rôle de Radix UI dans shadcn/ui ?


TP pour réfléchir et résoudre des problèmes​

Construire une barre de navigation avec des onglets dynamiques

Consignes​

  1. Implémentez une barre de navigation avec Tabs pour afficher du contenu dynamique.
  2. La barre doit contenir trois onglets : Accueil, À propos, et Contact.
  3. Lorsque l'utilisateur clique sur un onglet, le contenu correspondant s'affiche.

Exemple attendu​

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export default function ExempleTabs() {
  return (
    <Tabs defaultValue="accueil">
      <TabsList>
        <TabsTrigger value="accueil">Accueil</TabsTrigger>
        <TabsTrigger value="a-propos">À propos</TabsTrigger>
        <TabsTrigger value="contact">Contact</TabsTrigger>
      </TabsList>
      <TabsContent value="accueil">
        <p>Bienvenue sur la page d'accueil !</p>
      </TabsContent>
      <TabsContent value="a-propos">
        <p>Voici des informations à propos de nous.</p>
      </TabsContent>
      <TabsContent value="contact">
        <p>Contactez-nous à contact@example.com.</p>
      </TabsContent>
    </Tabs>
  );
}
Une solution