Aller au contenu
1.6k

Introduction

Qu'est-ce que le néobrutalisme, et comment le système de conception Neobrutalism.com l'applique à React — composants, blocs et modèles open-source pour la CLI shadcn.

Qu'est-ce que le néobrutalisme ?

Le néobrutalisme est un style de conception web apparu à la fin des années 2010 en réaction à l'uniformité du design plat et minimaliste. Il s'inspire du caractère brut de l'architecture brutaliste — matériaux bruts, structure apparente — et le transpose à l'écran à travers des couleurs vives et des formes géométriques ludiques.

Vous pouvez le reconnaître à cinq caractéristiques :

  • Des contours épais — chaque élément est souligné, généralement en noir uni.
  • Des ombres nettes — des décalages plats sans flou, de sorte que les éléments semblent physiquement superposés sur la page.
  • Des couleurs vives — des remplissages saturés et très contrastés. Pas de dégradés, pas d'effets « glassmorphism ».
  • Des angles droits et des caractères épais : une géométrie qui s'impose sans complexe.
  • Interaction tactile — les boutons s'enfoncent visiblement dans leur ombre lorsqu'on clique dessus.

Rien ne flotte, rien ne s'estompe, rien ne se cache. La refonte de Gumroad en 2021 a popularisé ce style ; aujourd’hui, c’est un choix incontournable pour les produits qui souhaitent afficher un aspect soigné plutôt qu’un aspect par défaut.

Qu'est-ce que Neobrutalism.com ?

Neobrutalism.com Il s'agit d'un système de conception qui apporte le style de React — basé sur le même modèle de registre que shadcn/ui. Vous n'avez pas besoin d'installer de paquet : l'shadcn CLI copie le code source de chaque composant dans votre projet, et à partir de là, ce code vous appartient.

Contenu :

  • Composants — l'ensemble complet, conçu selon une charte graphique unique afin que les bordures, les ombres et la typographie s'harmonisent entre elles.
  • Blocs — modules prêts à l'emploi : présentations de héros, tableaux de tarifs, écrans d'authentification, tableaux de bord.
  • Modèles — sites complets et panneaux d'administration.
  • Thèmes — un générateur de thèmes proposant des préréglages partageables.
  • Figma kit — le même système destiné aux concepteurs.
  • MCP serveur — Les éditeurs basés sur l'IA, tels que Claude Code et Cursor, peuvent ajouter des composants par leur nom.

Deux formes élémentaires, un seul style

Chaque composant est disponible en deux versions. Vous pouvez choisir l'une ou l'autre au moment de l'installation : c'est l'URL d'installation qui détermine laquelle vous obtiendrez :

  • Radix UI — les éléments de base sur lesquels fonctionnent déjà la plupart des projets shadcn.
  • Base UI — les nouvelles primitives développées par l'équipe de Radix + MUI.

Même interface, mêmes exportations, même API. L'accessibilité — focus, clavier, lecteurs d'écran — repose sur les éléments de base sous-jacents.

Essayez-le

Une seule commande, aucune configuration :

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json

Rendez-vous ensuite dans la section « Installation » pour les polices et les jetons de thème, ou parcourez d'abord les composants.