01 mai 2026

react néobrutalisme design ui tutoriel retroui

Convertir n'importe quel projet React au néobrutalisme en 10 minutes

Envie de donner du peps à votre application React un peu terne ? Découvrez comment transformer n'importe quel projet React en design néobrutaliste percutant en seulement 10 minutes avec Neobrutalism. Tutoriel pas à pas avec exemples avant/après.

Dov Azencot

@DovAzencot

Partager sur X

Soyons honnêtes : votre application React ressemble probablement à toutes les autres. Propre ? Oui. Professionnelle ? Sans aucun doute. Mémorable ? Pas le moins du monde.

Mais si je vous disais qu'en seulement 10 minutes, vous pouviez transformer votre projet passe-partout en quelque chose qui a de la personnalité ? Quelque chose qui fait dire aux gens : « Ouah, c'est quoi CE truc ? »

C'est toute la force du néobrutalisme : un style de design franc, assumé, impossible à ignorer. Et avec Neobrutalism, convertir votre projet React devient ridiculement simple.

Prenez votre café (ou votre boisson énergisante, on ne juge pas), et transformons cette application fade en quelque chose de plus corsé.

C'est quoi, au juste, le néobrutalisme ?

Avant de plonger, mettons-nous d'accord. Le néobrutalisme est un courant de design qui s'inspire de l'architecture brutaliste des années 1950, brute et gorgée de béton, pour lui donner une relecture moderne et numérique.

Imaginez :

Des bordures noires épaisses sur tout
Des ombres franches (aucune de ces histoires de flou tout doux)
Des couleurs très contrastées comme le noir, le blanc et le jaune fluo
Zéro coin arrondi (tout en angles et en tranchant)
Des mises en page asymétriques qui cassent la grille

C'est de l'anti-perfectionnisme. C'est rebelle. C'est l'équivalent, en design, du blouson de cuir enfilé pour un conseil d'administration. Et ça marche.

Pourquoi Neobrutalism ?

Vous pourriez construire vos composants néobrutalistes de zéro, mais pourquoi réinventer la roue quand Neobrutalism existe ? C'est une bibliothèque de composants React pensée spécialement pour le néobrutalisme, avec :

Des composants prêts à l'emploi arborant cette signature brute
Une installation facile via la CLI
Une personnalisation totale avec Tailwind CSS
Une compatibilité avec Next.js, Vite, Remix, bref n'importe quelle configuration React

En prime, c'est gratuit et open source. C'est parti.

Étape 1 : préparer votre projet (2 minutes)

Commençons par le commencement. Si vous partez d'un projet React existant, vous avez déjà une longueur d'avance. Sinon, montons vite fait une application Next.js (mais tout ceci fonctionne pour n'importe quel framework React).


pnpm create next-app@latest my-brutal-app
cd my-brutal-app
npx create-next-app@latest my-brutal-app
cd my-brutal-app
yarn create next-app@latest my-brutal-app
cd my-brutal-app
bunx --bun create-next-app@latest my-brutal-app
cd my-brutal-app

Dites oui à TypeScript et à Tailwind CSS quand on vous les propose. On aura besoin des deux.

Si vous êtes sur Vite ou Create React App, aucun souci : la mise en place est quasiment identique.

Étape 2 : installer Neobrutalism (1 minute)

Place à la magie. Il faut initialiser shadcn (Neobrutalism s'appuie dessus en coulisses) et installer les utilitaires Neobrutalism.

Lancez cette commande :


pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

On vous posera quelques questions. Voici ce qu'il faut choisir :

Style : Default
Base color : Slate (peu importe, on va l'écraser)
CSS variables : Yes

Ensuite, installez les utils de Neobrutalism :


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

Voilà. C'est tout. Vous avez désormais les fondations pour bâtir des interfaces brutalistes.

Étape 3 : ajouter le thème néobrutaliste (2 minutes)

C'est ici que la transformation commence vraiment. Ouvrez votre fichier global.css (généralement dans app/globals.css ou src/index.css) et remplacez les variables de thème par la signature brute de Neobrutalism.

Collez ceci dans votre CSS :

@theme {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: 0;
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-border: var(--border);
}
 
:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --border: #000;
}
 
.dark {
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --border: #3a3a3a;
}

Que vient-il de se passer ?

On a supprimé tous les border-radius (fini les coins arrondis !)
On a échangé les ombres douces contre des ombres franches et décalées
On a mis en place un jeu de couleurs noir/blanc/jaune bien tranché
On a ajouté la prise en charge du mode sombre (parce qu'on n'est pas des barbares)

Votre application commence déjà à avoir une autre allure. Mais on n'a pas fini.

Étape 4 : installer vos premiers composants (2 minutes)

Récupérons de vrais composants. Commençons par l'essentiel : Button, Card et Input.

Lancez ces commandes une par une :


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

Chaque composant atterrit dans votre dossier components/neobrutalism/, prêt à l'emploi. Pas une seule ligne de CSS à écrire.

Étape 5 : remplacer vos composants (2 minutes)

Voici le moment amusant : remplacer vos vieux composants ternes par les nouveaux, façon brute.

Avant :

// Your old, generic button
<button className="rounded bg-blue-500 px-4 py-2 text-white">Click Me</button>

Après :

import { Button } from "@/components/neobrutalism/Button"
 
;<Button>Click Me</Button>

D'un coup, vous voilà avec un bouton à bordures noires épaisses, ombre franche et cette signature néobrutaliste bien à lui.

Faisons de même avec une carte :

Avant :

<div className="rounded-lg bg-white p-6 shadow-lg">
  <h2 className="text-2xl font-bold">My Card</h2>
  <p className="text-gray-600">Some generic content here.</p>
</div>

Après :

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/neobrutalism/Card"
 
;<Card>
  <CardHeader>
    <CardTitle>My Card</CardTitle>
    <CardDescription>Now with 100% more attitude.</CardDescription>
  </CardHeader>
  <CardContent>Some bold content here.</CardContent>
</Card>

Même structure, tout autre caractère. La carte a désormais des angles vifs, des bordures franches et une ombre nette qui la fait bondir hors de la page.

Étape 6 : ajouter les polices néobrutalistes (1 minute)

La typographie occupe une place ÉNORME dans le néobrutalisme. Les polices système par défaut ne feront pas l'affaire. Neobrutalism recommande Archivo Black pour les titres et Space Grotesk pour le corps de texte.

Si vous êtes sur Next.js, ajoutez ceci à votre app/layout.tsx :

import { Archivo_Black, Space_Grotesk } from "next/font/google"
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
})
 
const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

Vos titres deviennent massifs et affirmés, tandis que le corps de texte reste net et lisible.

Étape 7 : affiner et personnaliser (facultatif)

À ce stade, vous avez pour ainsi dire terminé, mais si vous voulez aller plus loin dans la personnalisation, Neobrutalism vous facilite la tâche.

Envie d'une autre couleur d'accent ? Modifiez la variable --primary dans votre CSS.

:root {
  --primary: #ff006e; /* Hot pink instead of yellow */
}

Envie d'ombres plus douces ? Ajustez les variables d'ombre.

--shadow: 2px 2px 0 0 var(--border); /* Smaller offset */

Envie d'ajouter d'autres composants ? Parcourez la bibliothèque complète sur neobrutalism.com/docs/components. Il y a des inputs, des badges, des boîtes de dialogue, des tableaux, et plus encore, tous habillés de cette esthétique brute.

Avant/après : la transformation

Bien, voyons la différence. Voici à quoi ressemble une landing page toute simple avant et après la conversion néobrutaliste.

Avant : une application React passe-partout

export default function GenericLanding() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="max-w-md rounded-lg bg-white p-8 shadow-lg">
        <h1 className="mb-4 text-3xl font-bold text-gray-900">
          Welcome to My App
        </h1>
        <p className="mb-6 text-gray-600">
          This is a clean, minimal design that looks like every other React app.
        </p>
        <input
          type="email"
          placeholder="Enter your email"
          className="mb-4 w-full rounded border border-gray-300 px-4 py-2"
        />
        <button className="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
          Get Started
        </button>
      </div>
    </div>
  )
}

Qu'est-ce qui cloche là-dedans ?

Rien, techniquement. C'est fonctionnel. C'est propre. Mais c'est aussi parfaitement oubliable. Montrez ça à 100 personnes, et elles le confondront avec une douzaine d'autres sites croisés dans la semaine.

Après : le relooking néobrutaliste

import { Button } from "@/components/neobrutalism/Button"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/neobrutalism/Card"
import { Input } from "@/components/neobrutalism/Input"
 
export default function BrutalLanding() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-[#ffdb33] p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="font-head text-4xl uppercase">
            Welcome to My App
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="font-sans text-lg">
            This is a bold, memorable design that actually stands out.
          </p>
          <Input type="email" placeholder="Enter your email" />
          <Button className="w-full">Get Started</Button>
        </CardContent>
      </Card>
    </div>
  )
}

Qu'est-ce qui a changé ?

Le fond : on est passé d'un gris terne à un jaune électrique
La typographie : un titre affirmé, en capitales, avec Archivo Black
Les bordures : tout a des bordures noires épaisses
Les ombres : franches et décalées, au lieu de flous tout doux
Les coins : zéro border-radius, tout en angles vifs
L'ambiance : de « brochure d'entreprise » à « startup indé qui a du chien »

C'est la même structure de composants, la même mise en page, mais le ressenti est tout autre. Les gens se souviendront de celui-ci.

Prenons un cas plus complexe : une carte de statistiques de tableau de bord.

Avant : un tableau de bord fadasse

export default function GenericStats() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="rounded-lg bg-white p-6 shadow">
        <p className="text-sm text-gray-500">Total Users</p>
        <p className="text-3xl font-bold text-gray-900">1,284</p>
        <p className="text-sm text-green-500">+12% from last month</p>
      </div>
      <div className="rounded-lg bg-white p-6 shadow">
        <p className="text-sm text-gray-500">Revenue</p>
        <p className="text-3xl font-bold text-gray-900">$52,340</p>
        <p className="text-sm text-green-500">+8% from last month</p>
      </div>
      <div className="rounded-lg bg-white p-6 shadow">
        <p className="text-sm text-gray-500">Active Now</p>
        <p className="text-3xl font-bold text-gray-900">127</p>
        <p className="text-sm text-red-500">-3% from last hour</p>
      </div>
    </div>
  )
}

Après : un tableau de bord brut

import { Card, CardContent } from "@/components/neobrutalism/Card"
 
export default function BrutalStats() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <Card className="bg-[#ffdb33]">
        <CardContent className="pt-6">
          <p className="mb-2 text-sm font-bold uppercase">Total Users</p>
          <p className="mb-2 font-head text-5xl">1,284</p>
          <p className="text-sm font-bold">▲ 12% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-white">
        <CardContent className="pt-6">
          <p className="mb-2 text-sm font-bold uppercase">Revenue</p>
          <p className="mb-2 font-head text-5xl">$52,340</p>
          <p className="text-sm font-bold">▲ 8% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-black text-white">
        <CardContent className="pt-6">
          <p className="mb-2 text-sm font-bold uppercase">Active Now</p>
          <p className="mb-2 font-head text-5xl">127</p>
          <p className="text-sm font-bold">▼ 3% from last hour</p>
        </CardContent>
      </Card>
    </div>
  )
}

Qu'est-ce qui diffère ?

Aplats de couleur : chaque carte a un fond distinct (jaune, blanc, noir)
Typographie affirmée : les chiffres sont énormes et utilisent la police de titrage
Contraste élevé : le texte blanc sur noir crée une hiérarchie visuelle immédiate
Libellés en capitales : tout paraît plus délibéré et plus affirmé
Des flèches plutôt que de la couleur : on utilise les symboles ▲ et ▼ pour plus de clarté

Les mêmes données, une présentation radicalement différente. La version brute paraît sûre d'elle et pensée, pas juste assemblée.

Astuces de pro pour le design néobrutaliste

Maintenant que vous maîtrisez les bases, voici quelques astuces pour vraiment réussir l'esthétique :

1. Assumez l'asymétrie

N'ayez pas peur de casser la grille. Décalez les éléments, faites se chevaucher les bordures, laissez les choses respirer de façon inégale. La perfection, c'est ennuyeux.

2. Utilisez la couleur à bon escient

Le néobrutalisme adore les associations très contrastées. Le noir et le blanc en base, puis une ou deux couleurs d'accent (jaune, rose, cyan). N'allez pas vers l'arc-en-ciel : choisissez une ambiance et engagez-vous.

3. Voyez grand pour la typographie

Les titres doivent être GIGANTESQUES. Le corps de texte peut rester normal, mais vos H1 doivent capter l'attention. Passez aux lettres affirmées, en capitales, quand vous voulez marquer les esprits.

4. Ajoutez des micro-interactions

Brut ne veut pas dire figé. Ajoutez des effets de survol où les boutons se décalent légèrement ou les ombres s'agrandissent. Gardez ça subtil mais perceptible.

<Button className="transition-transform hover:translate-x-1 hover:translate-y-1">
  Click Me
</Button>

5. N'en faites pas trop

Tous les éléments n'ont pas besoin d'une bordure épaisse. Toutes les sections n'ont pas besoin d'un fond vif. L'équilibre reste important, simplement penché du côté de l'audace.

Et maintenant ?

Félicitations ! Vous venez de refondre entièrement l'apparence de votre projet React en une dizaine de minutes. Voici ce que vous pouvez faire à partir de là :

Explorer d'autres composants

Neobrutalism propose une bibliothèque complète : badges, boîtes de dialogue, tableaux, onglets, et bien d'autres. Parcourez la documentation des composants et voyez ce que vous pouvez ajouter.

Personnaliser votre thème

Jouez avec les variables CSS pour coller à votre marque. Changez les couleurs d'accent, ajustez l'intensité des ombres ou modifiez les espacements pour vous l'approprier.

Construire quelque chose de chouette

Maintenant que votre application n'a plus l'air passe-partout, montrez-la ! Partagez-la sur Twitter, postez-la sur Reddit, ajoutez-la à votre portfolio. Le néobrutalisme, ça se remarque.

Rejoindre la communauté

Neobrutalism a un Discord bien actif où designers et développeurs partagent leurs projets, posent des questions et s'enthousiasment autour du design brut. Passez y faire un coucou.

Pour conclure

La plupart des applications React se ressemblent parce que la plupart des développeurs se tournent vers les mêmes outils : Material UI, Bootstrap, shadcn en réglages par défaut. Il n'y a rien de mal à ça (ce sont d'excellents outils !), mais ils ne vous aideront pas à sortir du lot.

Le néobrutalisme est un raccourci vers la personnalité. Il est affirmé, mémorable, et étonnamment simple à mettre en place avec les bons outils. Neobrutalism vous donne tout ce qu'il faut pour franchir le pas sans repartir de zéro.

En seulement 10 minutes, vous êtes passé de « encore une application React » à « attends, c'est quoi CE truc ? ». Et honnêtement ? C'est puissant.

Alors allez-y : rendez votre application impossible à ignorer.

Maintenant, lancez-vous et construisez quelque chose de brut. 🚀

← Retour aux articles

Convertir n'importe quel projet React au néobrutalisme en 10 minutes

C'est quoi, au juste, le néobrutalisme ?

Pourquoi Neobrutalism ?

Étape 1 : préparer votre projet (2 minutes)

Étape 2 : installer Neobrutalism (1 minute)

Étape 3 : ajouter le thème néobrutaliste (2 minutes)

Étape 4 : installer vos premiers composants (2 minutes)

Étape 5 : remplacer vos composants (2 minutes)

Étape 6 : ajouter les polices néobrutalistes (1 minute)

Étape 7 : affiner et personnaliser (facultatif)

Avant/après : la transformation

Avant : une application React passe-partout

Après : le relooking néobrutaliste

Autre exemple : un widget de tableau de bord

Avant : un tableau de bord fadasse

Après : un tableau de bord brut

Astuces de pro pour le design néobrutaliste

Et maintenant ?

Pour conclure

Créer un site néobrutaliste avec Tailwind CSS v4 (guide pas à pas)

Les 8 meilleures bibliothèques d’animation React en 2026

20 palettes de couleurs néobrutalistes avec codes hexadécimaux (prêtes à copier-coller)

Convertir n'importe quel projet React au néobrutalisme en 10 minutes

C'est quoi, au juste, le néobrutalisme ?

Pourquoi Neobrutalism ?

Étape 1 : préparer votre projet (2 minutes)

Étape 2 : installer Neobrutalism (1 minute)

Étape 3 : ajouter le thème néobrutaliste (2 minutes)

Étape 4 : installer vos premiers composants (2 minutes)

Étape 5 : remplacer vos composants (2 minutes)

Étape 6 : ajouter les polices néobrutalistes (1 minute)

Étape 7 : affiner et personnaliser (facultatif)

Avant/après : la transformation

Avant : une application React passe-partout

Après : le relooking néobrutaliste

Autre exemple : un widget de tableau de bord

Avant : un tableau de bord fadasse

Après : un tableau de bord brut

Astuces de pro pour le design néobrutaliste

Et maintenant ?

Pour conclure

À lire ensuite

Créer un site néobrutaliste avec Tailwind CSS v4 (guide pas à pas)

Les 8 meilleures bibliothèques d’animation React en 2026

20 palettes de couleurs néobrutalistes avec codes hexadécimaux (prêtes à copier-coller)