Shadcn

shadcn/ui et shadcn-vue : Une Nouvelle Approche des Composants UI

Qu'est-ce que shadcn-vue ?

shadcn-vue est une collection de composants UI réutilisables, conçus avec Vue.js et Tailwind CSS. Contrairement aux bibliothèques de composants traditionnelles, shadcn-vue adopte une approche radicalement différente : les composants ne sont pas installés comme une dépendance npm, mais copiés directement dans votre projet.

Cette approche vous donne un contrôle total sur vos composants, car ils deviennent une partie intégrante de votre code source.

La Philosophie "Copy, Paste, Own"

Différence avec les Bibliothèques Classiques

Avec des bibliothèques comme Bootstrap, Vuetify ou Element Plus, vous installez un package npm qui contient tous les composants. Ces composants restent dans node_modules et vous les importez comme des dépendances externes.

Avec shadcn-vue, le processus est différent :

Vous sélectionnez les composants dont vous avez besoin
Vous les installez via CLI, qui les copie dans votre projet
Les composants sont placés dans resources/js/components/ui/
Vous pouvez les modifier librement, car ils font partie de votre code

Avantages de Cette Approche

Aspect	Bibliothèques Classiques	shadcn-vue
Customisation	Limitée (via props ou CSS override)	Totale (modification directe du code)
Taille du bundle	Toute la bibliothèque	Uniquement les composants utilisés
Dépendances	Package externe à maintenir	Code source sous votre contrôle
Apprentissage	API spécifique à apprendre	Code Vue.js standard à lire et comprendre

Pourquoi shadcn-vue dans les Starter Kits Laravel ?

Les nouveaux Laravel Starter Kits (React et Vue) incluent shadcn/shadcn-vue pour plusieurs raisons :

✅ Design moderne et professionnel : Les composants suivent les standards d'accessibilité (ARIA) et les bonnes pratiques de design
✅ Intégration Tailwind CSS : Tous les composants utilisent Tailwind, assurant une cohérence visuelle avec votre projet
✅ Facilité de customisation : Modifier l'apparence d'un composant se fait en changeant les classes Tailwind directement dans le fichier
✅ Pas de surcharge : Vous n'installez que les composants dont vous avez besoin
✅ TypeScript natif : Types inclus pour une meilleure autocomplétion et détection d'erreurs

Installation et Utilisation

Ajouter un Nouveau Composant

Le Vue Starter Kit est préconfigurée avec shadcn-vue. Pour ajouter un composant, utilisez la CLI :

npx shadcn-vue@latest add button

Cette commande va :

Télécharger le composant Button.vue
Le placer dans resources/js/components/ui/button/
Installer les dépendances nécessaires si besoin

Utiliser le Composant

Une fois installé, importez et utilisez le composant comme n'importe quel composant Vue :

<script setup lang="ts">
import { Button } from '@/components/ui/button';
</script>

<template>
  <div>
    <Button>Cliquez ici</Button>
    <Button variant="destructive">Supprimer</Button>
    <Button variant="outline" size="sm">Petit bouton</Button>
  </div>
</template>

Personnaliser un Composant

Le fichier du composant se trouve maintenant dans votre projet. Pour le personnaliser, ouvrez-le et modifiez-le :

Chemin du fichier : resources/js/components/ui/button/Button.vue

<template>
  <button 
    :class="cn(
      'inline-flex items-center justify-center rounded-md',
      'bg-blue-600 hover:bg-blue-700', // Modifiez ces classes
      // ... autres classes
    )"
  >
    <slot />
  </button>
</template>

Toutes les modifications s'appliqueront immédiatement à tous les usages du composant dans votre application.

Composants Disponibles

shadcn-vue propose une large gamme de composants :

Composants de Base :

Button, Input, Textarea, Checkbox, Radio, Select
Label, Badge, Avatar, Separator

Navigation :

Tabs, Breadcrumb, Pagination, Command, NavigationMenu

Overlays & Modales :

Dialog (Modal), Sheet (Drawer), Popover, Tooltip, AlertDialog

Affichage de Données :

Table, Card, Alert, Toast, Progress

Formulaires :

Form, Calendar, Date Picker, Combobox

Layout :

Accordion, Collapsible, Sidebar

La liste complète est disponible sur shadcn-vue.com.

Exemple Pratique : Ajouter un Switch

Imaginons que vous souhaitiez ajouter un composant Switch (interrupteur) pour activer/désactiver le mode sombre.

Étape 1 : Installer le composant

npx shadcn-vue@latest add switch

Étape 2 : Utiliser le composant

<script setup lang="ts">
import { Switch } from '@/components/ui/switch';
import { ref } from 'vue';

const darkMode = ref(false);
</script>

<template>
  <div class="flex items-center space-x-2">
    <Switch v-model:checked="darkMode" id="dark-mode" />
    <label for="dark-mode" class="cursor-pointer">Mode sombre</label>
  </div>
</template>

Le composant est maintenant intégré à votre projet et fonctionne immédiatement.

Les Layouts du Starter Kit

Le Vue Starter Kit utilise shadcn-vue de manière intensive. Les différents layouts (sidebar, header, auth) sont construits avec des composants shadcn-vue :

AppSidebar.vue → Utilise le composant Sidebar de shadcn-vue
Formulaires d'authentification → Utilisent Form, Input, Button
Navigation → Utilise NavigationMenu, DropdownMenu

Ces composants sont déjà installés et configurés. Vous pouvez les explorer dans le dossier resources/js/components/ pour comprendre leur fonctionnement.

Bonnes Pratiques

Explorer les Composants Installés

Prenez le temps d'ouvrir les fichiers des composants dans resources/js/components/ui/. C'est une excellente opportunité d'apprendre :

Comment structurer des composants Vue.js réutilisables
Comment utiliser Tailwind CSS efficacement
Comment implémenter l'accessibilité (attributs ARIA)

Modifier avec Prudence

Bien que vous puissiez modifier les composants librement, réfléchissez aux conséquences :

Une modification affecte tous les usages du composant dans votre projet
Documentez vos changements si vous travaillez en équipe
Considérez créer une variante plutôt que de modifier le composant de base si vous avez besoin d'un comportement spécifique

Installer uniquement ce dont vous avez besoin

N'installez pas tous les composants "au cas où". Installez-les au fur et à mesure de vos besoins pour garder votre projet léger.

Comparaison : Avant et Après

Avant shadcn-vue

Vous aviez deux options pour créer des interfaces :

Utiliser une bibliothèque complète (Vuetify, Element Plus)
- ❌ Personnalisation difficile
- ❌ Surcharge du bundle
- ❌ Dépendance à une API externe
Tout coder vous-même
- ❌ Long et répétitif
- ❌ Risque de bugs
- ❌ Accessibilité souvent négligée

Avec shadcn-vue

Vous bénéficiez des deux approches :

✅ Composants de qualité professionnelle, immédiatement disponibles
✅ Contrôle total pour les adapter à vos besoins
✅ Code source lisible et modifiable
✅ Pas de "boîte noire" externe

Conclusion

shadcn-vue représente une évolution dans la manière de concevoir les bibliothèques de composants. En plaçant le code directement dans votre projet, cette approche vous donne :

✅ Un contrôle total sur vos composants
✅ Une meilleure compréhension du code que vous utilisez
✅ Une personnalisation sans friction
✅ Une maintenance simplifiée (pas de version externe à suivre)

Avec les Laravel Starter Kits, shadcn-vue est déjà configuré et prêt à l'emploi. Vous pouvez commencer à construire votre interface immédiatement en installant les composants dont vous avez besoin.

Shadcn

shadcn/ui et shadcn-vue : Une Nouvelle Approche des Composants UI

Qu'est-ce que shadcn-vue ?#

La Philosophie "Copy, Paste, Own"#

Différence avec les Bibliothèques Classiques#

Avantages de Cette Approche#

Pourquoi shadcn-vue dans les Starter Kits Laravel ?#

Installation et Utilisation#

Ajouter un Nouveau Composant#

Utiliser le Composant#

Personnaliser un Composant#

Composants Disponibles#

Exemple Pratique : Ajouter un Switch#

Les Layouts du Starter Kit#

Bonnes Pratiques#

Explorer les Composants Installés#

Modifier avec Prudence#

Installer uniquement ce dont vous avez besoin#

Comparaison : Avant et Après#

Avant shadcn-vue#

Avec shadcn-vue#

Conclusion#

Ressources#