Shadcn

Voir la vidéo
Intermédiaire
Télécharger la vidéo
Description Sommaire

shadcn se présente comme une bibliothèque de composants React mais avec un détail très particulier. Contrairement à des solutions comme Material UI où les composants restent dans la dépendance, shadcn copie directement le code du composant dans votre projet ce qui permet une personnalisation plus poussée, que ce soit au niveau du style ou même de la structure.

Le gros intérêt, c’est que l’on échappe à la frustration habituelle des grosses bibliothèques de composants : le manque de contrôle ou la difficulté à adapter le style.

Sommaire

Utilisation

Shadcn peut être installé sur différents types de projets React. Une fois installé vous pourrez importer le composant que vous souhaitez à l'aide de la commande shadcn. Par exemple avec bun :

bunx --bun shadcn@latest add button

Cette commande va automatiquement ajouter le code du composant dans le un dossier ui et vous pourrez commencer à l'utiliser dans votre projet.

Personnalisation (TweakCN)

Shadcn utilise des variables utilitaires pour définir les couleurs et peut être facilement personnalisable.

<body class="bg-background text-foreground">
  <!-- Contenu -->
</body>

Les couleurs se gèrent donc dans index.css et peuvent être remplacées facilement. Si vous recherchez des thèmes de couleurs préconçu vous pouvez utiliser tweakcn qui propose des associations de couleurs prédéfinies.

L’écosystème

Shadcn ne se limite pas à ses propres composants. C’est aussi un protocole permettant d’importer des composants depuis d’autres bibliothèques, comme Origin UI par exemple. L’import se fait via une URL vers un fichier JSON, qui décrit les dépendances et les fichiers à générer.

bunx --bun shadcn@latest add https://originui.com/r/comp-530.json

Des sites collaboratifs comme 21st.dev ou awesome-shadcn-ui proposent aussi des composants. En revanche, dans ce cas là, il faudra faire attention car certains composants proposent un style spécifique qui rompt la cohérence offerte par shadcn de base.

Avantages & Inconvénients

Avantages

  • Cohérence graphique : tous les composants partagent un style uniforme, pensé pour fonctionner ensemble.
  • Code local : si on le souhaite on peut complètement changer la signature d'un composant pour l'adapter à nos besoins.
  • Protocole d’import : permet d’intégrer facilement des composants tiers.

Inconvénients

  • Choix techniques imposés : certains choix dans la manière de faire les chose semble étrange (utilisation de class-variance-authority + tailwind merge)
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
  • Dépendance à Radix UI : beaucoup de composants ne font que recopier la structure de RadixUI en ajoutant des classes CSS. Ce qui donne souvent des composants trop complexe à utiliser.
  • Pas de mise à jour simple : pour mettre à jour un composant il faut télécharger la nouvelle version ce qui écrasera nécessairement vos modification.
  • Pas de gestion de version dans les dépendances : certains composants importent des dépendances tiers automatiquement, mais aucun numéro de version n'est précisé. On se retrouve donc parfois à importer une dépendance qui a changé et qui ne fonctionnera pas avec le code du composant proposé.
  • Pas adapté à tous les projets : si vous partez d’une maquette avec un design précis, partir directement d’une librairie headless (Radix UI, Ariakit, Bazui…) sera plus efficace et nécessitera moins de travail.

Conclusion

En résumé, shadcn est intéréssant si vous cherchez un kit cohérent prêt à l’emploi, avec la possibilité de le personnaliser finement. Mais si votre projet part d’un design sur-mesure, mieux vaut envisager une librairie headless et construire vos propres composants..

Publié
Technologies utilisées
React
Auteur :
Grafikart
Partager