Les librairies UI traditionnelles permettent de démarrer rapidement, mais elles peuvent devenir contraignantes lorsque le produit nécessite une identité visuelle spécifique. C’est l’une des raisons pour lesquelles Shadcn/UI et Tailwind CSS sont devenus mon standard.
Le point important de Shadcn/UI n’est pas simplement son apparence. C’est surtout la philosophie : les composants font partie du projet au lieu d’être une boîte noire distante.
La propriété du code
Avec une librairie classique, j’importe souvent un composant depuis node_modules.
Avec Shadcn/UI, le composant est ajouté au repository :
components/
ui/
button.tsx
dialog.tsx
input.tsx
dropdown-menu.tsx
Je peux donc modifier sa structure, ses variantes, son accessibilité et son comportement.
Tailwind comme couche de design
Tailwind permet d’exprimer directement les décisions visuelles dans les composants.
<Button className="rounded-xl px-5">
Create project
</Button>
Pour un projet qui possède son propre design system, cette proximité entre structure et style est particulièrement pratique.
Construire un vrai Design System
Je ne veux pas seulement une collection de composants.
Je définis progressivement :
- typographie ;
- espacements ;
- rayons ;
- tokens de couleur ;
- états interactifs ;
- composants de formulaire ;
- patterns de feedback ;
- responsive behavior.
Le but est que deux pages différentes donnent l’impression d’appartenir au même produit.
Accessibilité
La personnalisation ne doit pas supprimer les comportements accessibles.
Pour les composants interactifs, je vérifie notamment :
- navigation clavier ;
- focus visible ;
- labels ;
- rôles ARIA lorsque nécessaires ;
- contraste ;
- états disabled/loading.
Une interface jolie mais inutilisable au clavier n’est pas un bon Design System.
Dark mode
Tailwind rend également les variantes de thème simples à organiser.
Je préfère centraliser les tokens plutôt que d’ajouter des couleurs arbitraires partout dans les composants.
Design tokens
│
▼
UI primitives
│
▼
Feature components
│
▼
Pages
Cette hiérarchie évite que chaque page invente son propre langage visuel.
Pourquoi je préfère cette approche
Je recherche trois choses :
Contrôle — je possède le code.
Cohérence — les composants suivent les mêmes règles.
Légèreté — je n’embarque pas une énorme suite de composants dont je n’utilise qu’une petite partie.
Shadcn/UI + Tailwind n’est donc pas seulement un choix esthétique. C’est une manière de garder le design system proche du code et du produit.