Design System multi-thèmes avec Tailwind CSS, shadcn/ui et Radix UI

1. Les design tokens comme source de vérité

Un design system commence par les design tokens : couleurs, typographie, espacements, rayons, ombres et transitions. Ces valeurs sont définies une seule fois et référencées partout. Avec Tailwind CSS v4, on déclare ces tokens dans la configuration du thème. En utilisant des variables CSS (--color-primary, --color-background…), on découple la valeur de son usage : changer la valeur d'une variable suffit à changer tout le thème, ce qui est la base du support dark/light.

2. Support dark/light via variables CSS

Le mode sombre n'est pas une coquille de styles ajoutés par-dessus : c'est un jeu de tokens alternatif. La technique consiste à définir les variables CSS pour le thème clair sur :root, puis à redéfinir les mêmes variables sous un sélecteur sombre (classe .dark sur l'élément html). Les composants ne référencent plus jamais de couleur en dur : ils utilisent les variables. Ainsi, basculer le thème se résume à permuter la valeur des variables, sans toucher aux composants. Un bouton, un fond de carte ou un input réagissent instantanément et de manière cohérente.

3. Composants accessibles avec Radix UI

Radix UI fournit la logique d'accessibilité des composants interactifs : comportement clavier, gestion du focus, relations ARIA, gestion des popovers et dialogues. C'est la couche de comportement, sans style imposé. Pour chaque composant (bouton, menu, modal, tooltip, select…), on assemble le primitif Radix avec des styles Tailwind. Le résultat est à la fois accessible et visuellement cohérent, et le thème sombre fonctionne d'office car les styles passent par les tokens.

4. shadcn/ui : des composants copiés, pas une dépendance

L'approche de shadcn/ui inverse la logique habituelle : au lieu d'importer une bibliothèque monolithique, on génère le code source des composants directement dans le projet. Chaque composant est ainsi copiable, modifiable et adapté localement. Cette philosophie est idéale pour un design system réutilisable : on possède le code, on partage les tokens, et chaque projet garde la liberté d'ajuster sans attendre une mise à jour de bibliothèque. Le mode sombre est naturellement supporté puisque les composants utilisent les variables de thème.

5. Structure et réutilisation

Pour que le design system profite à plusieurs projets, je le structure comme un package partagé : le thème Tailwind (tokens), les composants UI de base, et quelques patterns métier réutilisables. Un guide de style documente chaque composant avec ses variantes et son comportement en mode sombre. Cette approche garantit une cohérence entre applications tout en restant légère et sans verrouillage de bibliothèque. Le résultat est un système que je réutilise sur l'ensemble de mes projets web, des marketplaces aux SaaS.

Conclusion

Un design system multi-thèmes est un investissement qui paie sur chaque projet. Avec Tailwind CSS v4 pour les tokens et utilitaires, Radix UI pour l'accessibilité et shadcn/ui pour des composants copiables, on obtient un socle souple, accessible et véritablement multi-thème. C'est le fondement sur lequel je construis des interfaces modernes et cohérentes.