Qu'est-ce que shadcn ui
Pas une bibliothèque traditionnelle
La distinction la plus significative de shadcn/ui est qu'elle n'est pas une bibliothèque tout-en-un traditionnelle. Au lieu d'installer toute la bibliothèque, vous copiez des composants individuels dans vos projets.
Cette approche permet une personnalisation complète et élimine les dépendances inutiles et les éléments dont vous n'avez pas besoin.
Contrôle total
Étant donné que vous copiez un code brut, vous avez un contrôle total sur les styles et les fonctionnalités. Modifier ou étendre la fonctionnalité des composants pour répondre à des besoins spécifiques ne pose pas de problèmes traditionnels qui apparaissent lors de l'utilisation de bibliothèques classiques.
Conçu pour React & Next.js
shadcn/ui est construit pour être utilisé avec React, Next.js, Astro, Remix, et Gatsby. Il prend également en charge le rendu côté serveur (SSR) et la génération de sites statiques (SSG).
Qualité des composants
La collection offre une large gamme de composants bien conçus. Des formulaires et des boutons aux modèles plus complexes et aux menus déroulants.
Chaque composant est conçu en tenant compte des meilleures pratiques de design, y compris la gestion des états et les attributs d'accessibilité.
Comment utiliser shadcn/ui
Voici un exemple d'utilisation de shadcn avec Next.js.
1. Créer un projet
Exécutez la commande init pour créer un nouveau projet Next.js ou pour en configurer un existant :
npx shadcn@latest init
Vous pouvez utiliser le paramètre -d pour les valeurs par défaut, c'est-à-dire new-york, zinc et yes pour les variables CSS.
npx shadcn@latest init -d
2. Configurer components.json
Vous serez invité à répondre à quelques questions pour configurer components.json :
Quel style souhaitez-vous utiliser ? › New YorkCouleur de base ? › ZincVoulez-vous utiliser des variables CSS pour les couleurs ? › non / oui
3. Trouvez les composants dont vous avez besoin
Maintenant, vous pouvez ajouter des composants à votre projet. Rendez-vous sur la documentation des composants shadcn pour trouver les composants nécessaires.
Ajouter un composant est simple, utilisez simplement la commande add, par exemple, pour le composant bouton :
npx shadcn@latest add button
Une autre façon d'utiliser les composants shadcn ui est d'utiliser Vercel's v0. C'est une IA générative qui utilise les composants shadcn pour créer des pages Web.
Avantages de shadcn/ui
1. Léger
En ne copiant que les composants dont vous avez besoin, votre projet reste léger et exempt de tout encombrement inutile de votre base de code.
2. Personnalisable
shadcn/ui vous offre un contrôle total sur chaque composant. Cette liberté est particulièrement précieuse pour les projets avec des exigences de marque ou de design spécifiques.
3. Open Source et Gratuit
shadcn/ui est complètement open-source. Les développeurs peuvent contribuer au projet ou l'adapter selon leurs besoins spécifiques. Il est gratuit d'utilisation sans aucune restriction de licence, ce qui en fait un excellent outil pour des projets professionnels ou personnels.
Cas d'utilisation de shadcn ui
1. Interfaces hautement personnalisées
Si vous développez un projet nécessitant un contrôle détaillé sur l'aspect de votre interface, shadcn/ui vous permet d'ajuster les composants selon vos spécifications exactes.
2. Projets Next.js
Les développeurs travaillant sur des applications Next.js trouveront shadcn/ui parfaitement adapté, notamment avec sa compatibilité avec SSR et Tailwind CSS.
3. Prototypage de systèmes de design
Pour les équipes qui construisent leurs propres systèmes de design, shadcn/ui offre un excellent point de départ. La flexibilité de personnaliser les composants facilite le prototypage et le raffinement d'un ensemble de composants réutilisables.
Kit Figma shadcn ui
Il y a un excellent kit UI pour Figma réalisé par Pietro Schirano. Il contient tous les composants avec des propriétés personnalisables, typographie, etc. Copiez-le ici.
Conclusion
shadcn/ui est un excellent choix pour les développeurs à la recherche de composants front-end légers et prêts à l'emploi. Bien qu'il ne s'agisse pas d'une bibliothèque UI au sens traditionnel, elle possède tous les composants nécessaires pour un projet Web typique.
Au lieu de gribouillis confus pour ajuster les bibliothèques UI moyennes, vous obtenez le code source complet de chaque composant, que vous pouvez styliser et modifier selon vos besoins.
Pour plus d'informations, visitez shadcn/ui sur GitHub.
