1 mei 2026

react neobrutalisme UI-design tutorial retroui

Hoe je elk React-project in 10 minuten omvormt naar neobrutalisme

Wil je je saaie React-app een gedurfde make-over geven? Leer hoe je elk React-project in slechts 10 minuten omvormt tot een indrukwekkend neobrutalistisch design met Neobrutalism. Stap-voor-stap-tutorial met voor- en na-voorbeelden.

Dov Azencot

@DovAzencot

Deel op X

Laten we eerlijk zijn: je React-app ziet er waarschijnlijk uit als elke andere React-app. Strak? Zeker. Professioneel? Absoluut. Memorabel? Niet in de verste verte.

Maar wat als ik je vertel dat je in slechts 10 minuten je generiek ogende project kunt omvormen tot iets wat persoonlijkheid uitstraalt? Iets waarvan mensen zeggen: „Wauw, wat is DAT?”

Dat is de kracht van neobrutalisme — een designstijl die gedurfd, compromisloos en onmogelijk te negeren is. En met Neobrutalism is je React-project omvormen belachelijk makkelijk.

Pak je koffie (of energiedrankje, geen oordeel) en laten we die vlakke app veranderen in iets met pit.

Wat is neobrutalisme eigenlijk?

Voordat we duiken, laten we op één lijn komen. Neobrutalisme is een designbeweging die inspiratie put uit de rauwe, betonrijke brutalistische architectuur van de jaren 50 en die een moderne, digitale draai geeft.

Stel je voor:

Dikke zwarte randen op alles
Harde schaduwen (geen van dat zachte-blur-gedoe)
Contrastrijke kleuren zoals zwart, wit en neongeel
Nul afgeronde hoeken (alles scherp en hoekig)
Asymmetrische layouts die het grid doorbreken

Het is anti-perfectionisme. Het is rebels. Het is het design-equivalent van een leren jas dragen naar een bestuursvergadering. En het werkt.

Waarom Neobrutalism?

Je zou neobrutalistische componenten vanaf nul kunnen bouwen, maar waarom het wiel opnieuw uitvinden als Neobrutalism bestaat? Het is een UI-bibliotheek voor React, speciaal gebouwd voor neobrutalisme, met:

Kant-en-klare componenten met die kenmerkende brute esthetiek
Eenvoudige installatie via de CLI
Volledige aanpasbaarheid met Tailwind CSS
Compatibel met Next.js, Vite, Remix — eigenlijk elke React-opzet

Bovendien is het gratis en open source. Laten we beginnen.

Stap 1: zet je project op (2 minuten)

Eerst het belangrijkste. Als je met een bestaand React-project werkt, ben je al een stap verder. Zo niet, laten we snel een Next.js-app opzetten (maar dit werkt met elk React-framework).


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

Zeg ja tegen TypeScript en Tailwind CSS als het gevraagd wordt. We hebben beide nodig.

Gebruik je Vite of Create React App, dan is dat ook prima — de opzet is vrijwel identiek.

Stap 2: installeer Neobrutalism (1 minuut)

Nu de magie. We moeten shadcn initialiseren (Neobrutalism leunt er onder de motorkap op) en de Neobrutalism-utilities installeren.

Draai dit commando:


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

Je krijgt een paar vragen. Dit is wat je zou moeten kiezen:

Style: Default
Base color: Slate (maakt niet veel uit, we overschrijven het toch)
CSS variables: Yes

Installeer vervolgens de Neobrutalism-utils:


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

Klaar. Dat is alles. Je hebt nu de basis om brutalistische interfaces te bouwen.

Stap 3: voeg het neobrutalistische thema toe (2 minuten)

Hier begint de transformatie pas echt. Open je global.css-bestand (meestal in app/globals.css of src/index.css) en vervang de themavariabelen door het kenmerkende brute thema van Neobrutalism.

Plak dit in je 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;
}

Wat is er zojuist gebeurd?

We hebben alle border-radius op nul gezet (geen afgeronde hoeken meer)
We hebben de zachte schaduwen vervangen door harde, verschoven schaduwen
We hebben een gedurfd zwart/wit/geel-kleurenschema opgezet
We hebben ondersteuning voor donkere modus toegevoegd (want we zijn geen barbaren)

Je app begint er al anders uit te zien. Maar we zijn er nog niet.

Stap 4: installeer je eerste componenten (2 minuten)

Laten we een paar echte componenten pakken. We beginnen met de essentials: Button, Card en Input.

Draai deze commando's één voor één:


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

Elk component wordt toegevoegd aan je map components/neobrutalism/, klaar voor gebruik. Je hoeft geen enkele regel CSS te schrijven.

Stap 5: wissel je componenten uit (2 minuten)

Nu komt het leuke deel — je oude, saaie componenten vervangen door de nieuwe, brute.

Ervoor:

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

Erna:

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

Zomaar heb je een knop met dikke zwarte randen, een harde schaduw en die kenmerkende neobrutalistische sfeer.

Laten we hetzelfde doen met een kaart:

Ervoor:

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

Erna:

import { Card, CardHeader, CardTitle, CardDescription, CardContent } 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>

Dezelfde structuur, een compleet andere sfeer. De kaart heeft nu scherpe randen, dikke randen en een harde schaduw waardoor hij van de pagina afspringt.

Stap 6: voeg neobrutalistische lettertypes toe (1 minuut)

In neobrutalisme is typografie ENORM. De standaard systeemlettertypes volstaan niet. Neobrutalism raadt Archivo Black aan voor koppen en Space Grotesk voor de lopende tekst.

Als je Next.js gebruikt, voeg dit dan toe aan je 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>
  );
}

Nu zijn je koppen stevig en krachtig, terwijl je lopende tekst strak en leesbaar blijft.

Stap 7: verfijn en pas aan (optioneel)

Op dit punt ben je in feite klaar, maar wil je dieper aanpassen, dan maakt Neobrutalism het makkelijk.

Wil je een andere accentkleur? Verander de variabele --primary in je CSS.

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

Wil je zachtere schaduwen? Pas de schaduwvariabelen aan.

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

Wil je meer componenten toevoegen? Bekijk de volledige bibliotheek op neobrutalism.com/docs/components. Er zijn inputs, badges, dialogen, tabellen en meer — allemaal in die brute esthetiek.

Ervoor en erna: de transformatie

Oké, laten we het verschil zien. Zo ziet een simpele landingspagina eruit vóór en na de neobrutalistische conversie.

Ervoor: een generieke React-app

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

Wat is hier mis mee?

Technisch niks. Hij is functioneel. Hij is strak. Maar hij is ook volledig vergetelijk. Zou je hem aan 100 mensen laten zien, dan verwarren ze hem met een tiental andere sites die ze deze week zagen.

Erna: de neobrutalistische make-over

import { Button } from "@/components/neobrutalism/Button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/neobrutalism/Card";
import { Input } from "@/components/neobrutalism/Input";
 
export default function BrutalLanding() {
  return (
    <div className="min-h-screen bg-[#ffdb33] flex items-center justify-center p-4">
      <Card className="max-w-md w-full">
        <CardHeader>
          <CardTitle className="text-4xl font-head uppercase">
            Welcome to My App
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-lg font-sans">
            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>
  );
}

Wat is er veranderd?

Achtergrond: van saai grijs naar elektrisch geel
Typografie: een krachtige kop in hoofdletters met Archivo Black
Randen: alles heeft dikke zwarte randen
Schaduwen: hard en verschoven in plaats van zachte blurs
Hoeken: nul border-radius — scherp en hoekig
Sfeer: van „bedrijfsbrochure” naar „indie-startup met attitude”

Het is dezelfde componentstructuur, dezelfde layout, maar het voelt compleet anders. Deze onthouden mensen.

Nog een voorbeeld: dashboardwidget

Laten we een complexer voorbeeld bekijken — een statistiekkaart voor een dashboard.

Ervoor: een flauw dashboard

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

Erna: een bruut dashboard

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="text-sm font-bold uppercase mb-2">Total Users</p>
          <p className="text-5xl font-head mb-2">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="text-sm font-bold uppercase mb-2">Revenue</p>
          <p className="text-5xl font-head mb-2">$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="text-sm font-bold uppercase mb-2">Active Now</p>
          <p className="text-5xl font-head mb-2">127</p>
          <p className="text-sm font-bold">▼ 3% from last hour</p>
        </CardContent>
      </Card>
    </div>
  );
}

Wat is er anders?

Color blocking: elke kaart heeft een eigen achtergrond (geel, wit, zwart)
Krachtige typografie: de cijfers zijn enorm en gebruiken het display-lettertype
Hoog contrast: witte tekst op zwart creëert direct visuele hiërarchie
Labels in hoofdletters: laten alles doelbewuster en krachtiger aanvoelen
Pijlen in plaats van kleur: gebruikt de symbolen ▲ en ▼ voor duidelijkheid

Dezelfde data, een radicaal andere presentatie. De brute versie voelt zelfverzekerd en ontworpen, niet zomaar in elkaar gezet.

Pro-tips voor neobrutalistisch design

Nu je de basis onder de knie hebt, hier een paar tips om de esthetiek echt te raken:

1. Omarm asymmetrie

Wees niet bang om het grid te doorbreken. Verschuif elementen, laat randen overlappen, laat dingen ongelijk ademen. Perfectie is saai.

2. Gebruik kleur met opzet

Neobrutalisme houdt van contrastrijke kleurcombinaties. Zwart en wit als basis, en voeg dan een of twee accentkleuren toe (geel, roze, cyaan). Ga niet de regenboog op — kies een sfeer en houd je eraan.

3. Ga groots met typografie

Koppen moeten ENORM zijn. De lopende tekst mag normaal zijn, maar je H1's moeten aandacht opeisen. Gebruik krachtige hoofdletters als je een statement wilt maken.

4. Voeg micro-interacties toe

Bruut betekent niet statisch. Voeg hover-effecten toe waarbij knoppen licht verschuiven of schaduwen groter worden. Houd het subtiel maar merkbaar.

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

5. Overdrijf niet

Niet elk element heeft een dikke rand nodig. Niet elke sectie heeft een felle achtergrond nodig. Balans blijft belangrijk — alleen dan gekanteld richting durf.

Wat je hierna kunt doen

Gefeliciteerd. Je hebt zojuist je React-project een complete visuele opknapbeurt gegeven in ongeveer 10 minuten. Dit kun je vanaf hier doen:

Ontdek meer componenten

Neobrutalism heeft een volledige bibliotheek aan componenten — badges, dialogen, tabellen, tabs en meer. Bekijk de componentendocumentatie en ontdek wat je nog meer kunt toevoegen.

Pas je thema aan

Speel met de CSS-variabelen zodat ze bij je merk passen. Verander accentkleuren, pas de intensiteit van de schaduwen aan of tweak de afstand om het van jou te maken.

Bouw iets vets

Nu je app er niet meer generiek uitziet, pronk ermee. Deel hem op Twitter, plaats hem op Reddit, voeg hem toe aan je portfolio. Neobrutalisme trekt de aandacht.

Word lid van de community

Neobrutalism heeft een actieve Discord waar ontwerpers en developers projecten delen, vragen stellen en zich vergapen aan bruut design. Kom langs en zeg gedag.

Slotgedachten

De meeste React-apps zien er hetzelfde uit omdat de meeste developers naar dezelfde tools grijpen — Material UI, Bootstrap, shadcn met standaardinstellingen. Daar is niks mis mee (ze zijn geweldig), maar ze helpen je niet om op te vallen.

Neobrutalisme is een sluiproute naar persoonlijkheid. Het is gedurfd, memorabel en verrassend makkelijk te implementeren met de juiste tools. Neobrutalism geeft je alles wat je nodig hebt om de overstap te maken zonder vanaf nul opnieuw te bouwen.

In slechts 10 minuten ging je van „nog een React-app” naar „wacht, wat is DAT?”. En eerlijk? Dat is krachtig.

Dus ga ervoor — maak je app onmogelijk te negeren.

Ga nu de wereld in en bouw iets brutaals. 🚀

← Terug naar de artikelen

Hoe je elk React-project in 10 minuten omvormt naar neobrutalisme

Wat is neobrutalisme eigenlijk?

Waarom Neobrutalism?

Stap 1: zet je project op (2 minuten)

Stap 2: installeer Neobrutalism (1 minuut)

Stap 3: voeg het neobrutalistische thema toe (2 minuten)

Stap 4: installeer je eerste componenten (2 minuten)

Stap 5: wissel je componenten uit (2 minuten)

Stap 6: voeg neobrutalistische lettertypes toe (1 minuut)

Stap 7: verfijn en pas aan (optioneel)

Ervoor en erna: de transformatie

Ervoor: een generieke React-app

Erna: de neobrutalistische make-over

Nog een voorbeeld: dashboardwidget

Ervoor: een flauw dashboard

Erna: een bruut dashboard

Pro-tips voor neobrutalistisch design

Wat je hierna kunt doen

Slotgedachten

Hoe je een neobrutalistische website bouwt met Tailwind CSS v4 (stap voor stap)

De 8 beste React-animatiebibliotheken in 2026

20 neobrutalistische kleurenpaletten met hexcodes (klaar om te kopiëren en plakken)

Hoe je elk React-project in 10 minuten omvormt naar neobrutalisme

Wat is neobrutalisme eigenlijk?

Waarom Neobrutalism?

Stap 1: zet je project op (2 minuten)

Stap 2: installeer Neobrutalism (1 minuut)

Stap 3: voeg het neobrutalistische thema toe (2 minuten)

Stap 4: installeer je eerste componenten (2 minuten)

Stap 5: wissel je componenten uit (2 minuten)

Stap 6: voeg neobrutalistische lettertypes toe (1 minuut)

Stap 7: verfijn en pas aan (optioneel)

Ervoor en erna: de transformatie

Ervoor: een generieke React-app

Erna: de neobrutalistische make-over

Nog een voorbeeld: dashboardwidget

Ervoor: een flauw dashboard

Erna: een bruut dashboard

Pro-tips voor neobrutalistisch design

Wat je hierna kunt doen

Slotgedachten

Verder lezen

Hoe je een neobrutalistische website bouwt met Tailwind CSS v4 (stap voor stap)

De 8 beste React-animatiebibliotheken in 2026

20 neobrutalistische kleurenpaletten met hexcodes (klaar om te kopiëren en plakken)