Aller au contenu principal

Vite.JS avec ShadCN

Utiliser des composants pour créer une belle interface

Notions théoriques​

Qu'est-ce que ShadCN ?​

ShadCN est une collection de composants UI conçus pour React et basés sur Radix UI et Tailwind CSS.
Il permet de créer des interfaces modernes, accessibles et facilement personnalisables.

Un tutoriel complet est dédié à ShadCN : shadcn/ui.

Pourquoi utiliser ShadCN avec Vite ?​

  • Facilité d'intégration : Compatible avec Vite et React.
  • Composants prêts à l'emploi : Boutons, modals, inputs, etc.
  • Personnalisation avec Tailwind CSS : Styles flexibles et adaptables.
  • Accessibilité optimisée : Respect des bonnes pratiques UX.

Installation de ShadCN dans un projet Vite​

  1. Créer un projet Vite avec React

    npm create vite@latest mon-projet --template react
    cd mon-projet
    npm install

  2. Installer les dépendances nécessaires

    npm install tailwindcss postcss autoprefixer
    npx tailwindcss init -p

  3. Configurer Tailwind CSS
    Modifier tailwind.config.js pour inclure les styles de ShadCN :

    export default {
      content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
      theme: {
        extend: {},
      },
      plugins: [],
    };

  4. Installer ShadCN

    npx shadcn-ui@latest init

  5. Ajouter un composant (ex : bouton)

    npx shadcn-ui@latest add button

Les composants principaux de ShadCN​

ShadCN propose plusieurs composants utiles :

  • Button : Boutons interactifs
  • Input : Champs de saisie
  • Dialog : Fenêtres modales
  • Card : Cartes de contenu
  • Tooltip : Infobulles

Comparaison avec d'autres bibliothèques UI​

FonctionnalitéShadCNMaterial UIBootstrap
Personnalisation✅ Facile avec Tailwind⚠️ Plus complexe❌ Limité
Accessibilité✅ Optimisée✅ Bonne⚠️ Variable
Poids✅ Léger❌ Plus lourd⚠️ Moyen
Intégration avec Vite✅ Native✅ Possible✅ Possible

Exemple pratique : Ajouter un bouton interactif​

Nous allons ajouter un bouton ShadCN dans notre projet Vite.

Étape 1 : Ajouter un bouton avec ShadCN​

Dans le terminal, exécutez :

npx shadcn-ui@latest add button

Cela crée un composant Button.jsx dans src/components/ui/.

Étape 2 : Utiliser le bouton dans App.jsx​

Modifiez src/App.jsx pour inclure le bouton :

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

function App() {
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-2xl font-bold">Bienvenue sur Vite + ShadCN</h1>
      <Button className="mt-4">Cliquez-moi</Button>
    </div>
  );
}

export default App;

Étape 3 : Tester le rechargement à chaud​

Modifiez le texte du bouton et observez la mise à jour instantanée.

Étape 4 : Personnaliser le bouton avec Tailwind CSS​

Ajoutez des styles supplémentaires :

<Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Cliquez-moi
</Button>

Test de mémorisation/compréhension​


Quel est le principal avantage de ShadCN ?


Quelle commande permet d'ajouter un composant ShadCN ?


Quel framework CSS est utilisé par ShadCN ?


Quelle commande permet de créer un projet Vite ?


Quel composant ShadCN permet d'afficher une fenêtre modale ?


Comment tester le rechargement à chaud dans Vite ?


Quelle commande permet de démarrer le serveur de développement Vite ?


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

Dans ce TP, vous allez :

  1. Créer un projet Vite avec React.
  2. Installer Tailwind CSS et ShadCN.
  3. Ajouter un bouton personnalisé avec ShadCN.
  4. Ajouter une fenêtre modale (Dialog) qui s'ouvre au clic sur le bouton.
  5. Tester le rechargement à chaud.

Étape 1 : Création du projet​

Exécutez :

npm create vite@latest mon-projet --template react
cd mon-projet
npm install

Étape 2 : Installation de Tailwind CSS et ShadCN​

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx shadcn-ui@latest init

Étape 3 : Ajouter un bouton et une modale​

Ajoutez un bouton et une modale dans App.jsx :

import { Button } from "./components/ui/button";
import { Dialog, DialogTrigger, DialogContent } from "./components/ui/dialog";

function App() {
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <Dialog>
        <DialogTrigger asChild>
          <Button>Ouvrir la modale</Button>
        </DialogTrigger>
        <DialogContent>
          <p>Contenu de la modale</p>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default App;

Le TP est réussi si :

  • Le projet est bien créé avec Vite.
  • Le bouton s'affiche correctement.
  • La modale s'ouvre au clic.
  • Le rechargement à chaud fonctionne.