Présentation du projet

Neobrutalism.dev est une bibliothèque open‑source qui propose des composants UI inspirés du style néobrutaliste. Le dépôt GitHub, créé en 2022, expose des composants React écrits en TypeScript et utilise TailwindCSS pour le style. La dernière mise à jour, annoncée via Show HN, indique deux ajouts majeurs : la prise en charge de Base UI et l’introduction d’un nouveau thème couleur.

Intégration de Base UI

Base UI, publié par l’équipe MUI, fournit des primitives non stylisées destinées à être composées par des systèmes de design. L’annonce précise que Neobrutalism.dev « just added Base UI support », ce qui implique que les composants existants peuvent désormais être construits à partir des primitives de Base UI plutôt que de HTML natif. Cette approche modifie la chaîne de rendu : chaque composant encapsule un BaseButton ou BaseInput, puis applique les classes Tailwind spécifiques au néobrutalisme. L’avantage technique réside dans la séparation du comportement (géré par Base UI) et de l’esthétique (gérée par Tailwind), ce qui facilite la maintenance du code et la mise à jour des primitives sans toucher aux styles.

Le support de Base UI nécessite également la mise à jour du système de thème. Base UI expose un objet theme compatible avec le provider ThemeProvider de MUI. Neobrutalism.dev a donc ajouté un wrapper qui transmet le thème néobrutaliste au provider, garantissant que les variables CSS (couleurs, espacements) restent cohérentes entre les deux bibliothèques. Aucun numéro de version n’est communiqué, ce qui limite la capacité à comparer les performances ou la taille du bundle avant et après l’intégration.

Ajout du thème couleur

Le second point de l’annonce porte sur un « new color theme ». Le dépôt indique la présence d’un fichier theme.ts contenant une palette de six teintes principales, chacune définie en hexadécimal. Ces teintes remplacent les valeurs par défaut de Tailwind, ce qui modifie la génération des classes utilitaires. Le thème introduit un contraste plus élevé entre les fonds sombres et les éléments de texte, conforme aux exigences du style brut. L’impact sur le CSS final dépend du mode JIT de Tailwind : seules les classes réellement utilisées sont émises, ce qui limite l’augmentation du poids du fichier CSS.

En l’absence de benchmarks, il est impossible de quantifier l’effet sur le temps de compilation ou sur la taille du bundle. La documentation indique toutefois que le thème est compatible avec le mode sombre via la variable prefers-color-scheme, ce qui évite la duplication de styles.

Implications et limites

L’ajout de Base UI ouvre la porte à une interopérabilité avec d’autres bibliothèques MUI, mais il introduit également une dépendance supplémentaire. Les projets qui ne souhaitent pas adopter MUI devront inclure le package @mui/base, augmentant le nombre de modules npm. La nouvelle palette couleur, bien que cohérente avec le design, ne propose pas de système de génération dynamique (par exemple, via HSL). Les développeurs devront créer manuellement des variantes si leurs besoins dépassent les six teintes fournies. Enfin, le manque de données chiffrées (version, taille du bundle, performances) empêche une évaluation précise de l’impact réel sur les applications en production.