SHADCN CSS-IN-JS : des composants React avec StyleX
https://www.shadcn-cssinjs.com/
📌 SHADCN CSS-IN-JS est un registre communautaire de composants React à copier-coller, stylés avec StyleX et construits sur les primitives accessibles de Base UI.
Le principe reste celui qui a fait le succès de shadcn/ui : on n’installe pas une boîte noire, on ajoute le code des composants dans son propre projet. La différence se trouve dans la couche de style. Ici, les composants utilisent StyleX, le système CSS-in-JS de Meta, tandis que Base UI fournit les comportements accessibles pour les boutons, dialogues, menus, champs ou panneaux.
Cette approche permet de garder la main sur le résultat. Les tokens de design sont copiés dans le dépôt, les composants peuvent être modifiés directement et les variables CSS déjà utilisées par shadcn/ui peuvent être réutilisées. Il devient donc possible de faire cohabiter une interface shadcn classique avec des composants StyleX sans repartir de zéro sur le thème.
- 🧩 Composants React copiables et modifiables
- 🎨 Styles compilés avec StyleX
- ♿ Primitives interactives de Base UI
- 🛠️ Installation via le CLI shadcn
- 🌗 Tokens partagés pour le theming
- 📚 Menus, dialogues, tableaux et formulaires
Je trouve le projet intéressant pour les équipes qui veulent sortir de Tailwind sans abandonner l’expérience shadcn. Le code reste local et lisible, mais la gestion des styles devient plus structurée que dans une longue suite de classes utilitaires. C’est un choix qui peut mieux convenir à un design system amené à durer.
Le revers est une installation plus technique. Il faut configurer le plugin Babel de StyleX, son plugin PostCSS et la directive @stylex; dans la feuille globale. Dans un projet Next.js, cette configuration fait aussi sortir la compilation de Turbopack et impose de lancer le développement et le build sans cette option. Le gain de cohérence vient donc avec une vraie décision d’architecture.
bash
pnpm add @stylexjs/stylex @base-ui/react
npx shadcn@latest add https://shadcn-cssinjs.com/r/button.json
Le registre propose déjà des boutons, champs, tableaux, menus, dialogues, sidebars, sélecteurs, composants de navigation et éléments de feedback. La documentation fournit également les réglages de thème, le support RTL, le catalogue de registre et une intégration MCP destinée aux outils qui savent explorer ces composants. Le dépôt précise qu’il s’agit d’un projet communautaire non affilié à shadcn, distribué sous licence MIT.
SHADCN CSS-IN-JS se situe finalement entre un kit de composants et une méthode de construction d’interface. Il reprend la philosophie « own the code » de shadcn, tout en proposant une alternative CSS-in-JS plus typée et compilée. À surveiller si Tailwind ne correspond plus à la direction technique d’un projet React.
Sources
