shadcn

Vue d'ensemble

Qu'est-ce que shadcn ?

shadcn est une boîte à outils pour gérer, composer et personnaliser des composants UI React stylisés avec Tailwind CSS. Il permet aux développeurs et designers d'intégrer directement dans leurs projets des éléments UI réutilisables et de haute qualité, facilitant ainsi un développement rapide d'interfaces et des systèmes de design cohérents.

À qui s'adresse shadcn ?

shadcn est conçu pour les développeurs frontend, ingénieurs UI et équipes créant des applications React qui souhaitent :

• Ajouter et personnaliser rapidement des composants UI
• Maintenir une cohérence visuelle avec Tailwind CSS
• Étendre ou composer des composants selon les besoins spécifiques du projet
• Éviter de réinventer des motifs UI courants

Quels problèmes shadcn résout-il ?

• Simplifie l'ajout et la mise à jour des composants UI en tant que code source
• Fournit un registre consultable de composants et de presets
• Offre une documentation claire et des exemples d'utilisation pour chaque composant
• Supporte la configuration spécifique au projet via components.json

Comment l'utiliser

Étapes d'installation

1. Ajoutez shadcn à votre projet :
   Utilisez votre gestionnaire de paquets préféré. Par exemple, avec npm :

   npx shadcn@latest init
   

   Ou avec pnpm :

   pnpm dlx shadcn@latest init
   

   Ou avec bun :

   bunx --bun shadcn@latest init
   

2. Configurez votre projet :
   Suivez les instructions du CLI pour configurer votre projet et générer un fichier components.json.
3. Ajoutez des composants :
   Recherchez et ajoutez des composants depuis le registre :

   npx shadcn@latest add button
   

   Remplacez button par le nom du composant souhaité.
4. Personnalisez et composez :
   • Utilisez les variantes et tailles intégrées pour un style rapide.
   • Composez des composants (ex. : Tabs + Card + Form) pour des mises en page complexes.
   • Étendez ou stylisez les composants avec Tailwind CSS selon vos besoins.

Fichiers et structure du projet

• components.json : Suit les composants installés et la configuration.
• Le code source de chaque composant est ajouté directement à votre projet, permettant une personnalisation complète.

Documentation et exemples

• Obtenez la documentation et des exemples d'utilisation pour n'importe quel composant :

  npx shadcn@latest docs <component>
  

• Consultez le dépôt GitHub shadcn/ui pour plus de détails.

FAQ

Quand devrais-je utiliser shadcn ?

Utilisez shadcn lorsque vous avez besoin de créer rapidement, personnaliser ou étendre des composants UI dans un projet React, surtout si vous utilisez Tailwind CSS et privilégiez des composants éditables basés sur le code source.

Pour quels projets shadcn n'est-il pas adapté ?

shadcn est moins adapté aux projets non-React, ou si vous cherchez une bibliothèque de composants entièrement gérée sans intégration du code source. Il n'est pas non plus destiné aux travaux backend ou hors UI.

Comment mettre à jour ou supprimer des composants ?

• Mise à jour : relancez la commande add pour obtenir la dernière version.
• Suppression : supprimez les fichiers du composant dans votre projet et mettez à jour components.json en conséquence.

Où puis-je trouver plus d'aide ?

• Consultez la documentation shadcn/ui
• Utilisez l'aide du CLI : npx shadcn@latest --help

Pour un arbre complet des fichiers et une utilisation avancée, explorez le dépôt ou ouvrez l'onglet Fichiers dans votre répertoire de compétences agent.