1. Mai 2026

react Neobrutalismus UI-Design Tutorial retroui

So verwandelst du jedes React-Projekt in 10 Minuten in Neobrutalismus

Willst du deiner langweiligen React-App einen mutigen Anstrich verpassen? Lerne, wie du jedes React-Projekt in nur 10 Minuten mit Neobrutalism in ein beeindruckendes neobrutalistisches Design verwandelst. Schritt-für-Schritt-Tutorial mit Vorher-/Nachher-Beispielen.

Dov Azencot

@DovAzencot

Auf X teilen

Seien wir ehrlich: Deine React-App sieht wahrscheinlich aus wie jede andere React-App da draußen. Clean? Klar. Professionell? Absolut. Einprägsam? Nicht mal ansatzweise.

Aber was, wenn ich dir sage, dass du dein generisch wirkendes Projekt in nur 10 Minuten in etwas verwandeln kannst, das vor Persönlichkeit strotzt? In etwas, bei dem die Leute sagen: „Wow, was ist DAS?"

Das ist die Kraft des Neobrutalismus: ein Designstil, der mutig, kompromisslos und unmöglich zu ignorieren ist. Und mit Neobrutalism ist die Umstellung deines React-Projekts lächerlich einfach.

Schnapp dir deinen Kaffee (oder Energydrink, kein Urteil) und machen wir aus dieser faden App etwas mit mehr Würze.

Was zum Kuckuck ist Neobrutalismus überhaupt?

Bevor wir loslegen, bringen wir uns auf denselben Stand. Neobrutalismus ist eine Designbewegung, die sich von der rohen, betonlastigen brutalistischen Architektur der 1950er inspirieren lässt und ihr eine moderne, digitale Wendung gibt.

Stell dir vor:

Dicke schwarze Rahmen an allem
Harte Schatten (nichts von diesem weichen Weichzeichner-Unsinn)
Kontrastreiche Farben wie Schwarz, Weiß und Neongelb
Null abgerundete Ecken (alles scharf und kantig)
Asymmetrische Layouts, die das Raster durchbrechen

Das ist Antiperfektionismus. Das ist rebellisch. Das ist das Design-Äquivalent dazu, in einer Lederjacke zur Vorstandssitzung zu erscheinen. Und es funktioniert.

Warum Neobrutalism?

Du könntest neobrutalistische Komponenten von Grund auf bauen, aber warum das Rad neu erfinden, wenn es Neobrutalism gibt? Es ist eine UI-Bibliothek für React, die speziell für den Neobrutalismus gebaut wurde, mit:

Vorgefertigten Komponenten mit dieser typischen brutalen Ästhetik
Einfacher Installation über die CLI
Voller Anpassbarkeit mit Tailwind CSS
Kompatibilität mit Next.js, Vite, Remix, also im Grunde jedem React-Setup

Außerdem ist es kostenlos und Open Source. Legen wir los.

Schritt 1: Richte dein Projekt ein (2 Minuten)

Das Wichtigste zuerst. Wenn du mit einem bestehenden React-Projekt arbeitest, bist du schon einen Schritt voraus. Falls nicht, ziehen wir schnell eine Next.js-App hoch (aber das funktioniert mit jedem 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

Sag ja zu TypeScript und Tailwind CSS, wenn du gefragt wirst. Wir brauchen beides.

Wenn du Vite oder Create React App nutzt, ist das auch okay: Das Setup ist nahezu identisch.

Schritt 2: Installiere Neobrutalism (1 Minute)

Jetzt zur Magie. Wir müssen shadcn initialisieren (Neobrutalism setzt darunter darauf auf) und die Neobrutalism-Utilities installieren.

Führe diesen Befehl aus:


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

Es erscheinen ein paar Abfragen. Das solltest du wählen:

Style: Default
Base color: Slate (spielt keine große Rolle, wir überschreiben es ohnehin)
CSS variables: Yes

Als Nächstes installierst du die 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

Fertig. Das war's. Du hast jetzt das Fundament, um brutalistische Interfaces zu bauen.

Schritt 3: Füge das neobrutalistische Theme hinzu (2 Minuten)

Hier beginnt die Verwandlung so richtig. Öffne deine global.css-Datei (meist in app/globals.css oder src/index.css) und ersetze die Theme-Variablen durch das typische brutale Theme von Neobrutalism.

Füge das in dein CSS ein:

@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;
}

Was ist gerade passiert?

Wir haben alle border-radius entfernt (keine abgerundeten Ecken mehr)
Wir haben die weichen Schatten durch harte, versetzte Schatten ersetzt
Wir haben ein kräftiges Schwarz/Weiß/Gelb-Farbschema eingerichtet
Wir haben Dark-Mode-Unterstützung hinzugefügt (denn wir sind keine Barbaren)

Deine App fängt schon an, anders auszusehen. Aber wir sind noch nicht fertig.

Schritt 4: Installiere deine ersten Komponenten (2 Minuten)

Holen wir uns ein paar echte Komponenten. Wir starten mit dem Wesentlichen: Button, Card und Input.

Führe diese Befehle nacheinander aus:


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

Jede Komponente wird deinem Ordner components/neobrutalism/ hinzugefügt, einsatzbereit. Du musst keine einzige Zeile CSS schreiben.

Schritt 5: Tausche deine Komponenten aus (2 Minuten)

Jetzt kommt der spaßige Teil: deine alten, langweiligen Komponenten durch die neuen, brutalen zu ersetzen.

Vorher:

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

Nachher:

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

Und schon hast du einen Button mit dicken schwarzen Rahmen, einem harten Schatten und dieser typischen neobrutalistischen Note.

Machen wir dasselbe mit einer Karte:

Vorher:

<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>

Nachher:

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>

Dieselbe Struktur, eine völlig andere Note. Die Karte hat jetzt scharfe Kanten, kräftige Rahmen und einen harten Schatten, der sie von der Seite abheben lässt.

Schritt 6: Füge neobrutalistische Schriften hinzu (1 Minute)

Typografie ist RIESIG im Neobrutalismus. Die Standard-Systemschriften reichen nicht. Neobrutalism empfiehlt Archivo Black für Überschriften und Space Grotesk für den Fließtext.

Wenn du Next.js nutzt, füge das deiner app/layout.tsx hinzu:

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>
  );
}

Jetzt sind deine Überschriften wuchtig und kräftig, während der Fließtext klar und gut lesbar bleibt.

Schritt 7: Feinschliff und Anpassung (optional)

An diesem Punkt bist du im Grunde fertig, aber wenn du weiter anpassen willst, macht Neobrutalism es dir leicht.

Willst du eine andere Akzentfarbe? Ändere die Variable --primary in deinem CSS.

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

Willst du weichere Schatten? Passe die Schatten-Variablen an.

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

Willst du mehr Komponenten hinzufügen? Sieh dir die vollständige Bibliothek unter neobrutalism.com/docs/components an. Es gibt Inputs, Badges, Dialoge, Tabellen und mehr, alle im brutalen Stil.

Vorher und nachher: Die Verwandlung

Also gut, schauen wir uns den Unterschied an. So sieht eine einfache Landingpage vor und nach der neobrutalistischen Umstellung aus.

Vorher: Eine generische 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>
  );
}

Was ist daran verkehrt?

Technisch nichts. Sie ist funktional. Sie ist clean. Aber sie ist auch völlig vergessenswert. Würdest du sie 100 Leuten zeigen, würden sie sie mit einem Dutzend anderer Seiten verwechseln, die sie diese Woche gesehen haben.

Nachher: Der neobrutalistische Umbau

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>
  );
}

Was hat sich geändert?

Der Hintergrund: wechselte von langweiligem Grau zu Elektrikgelb
Die Typografie: eine kräftige Überschrift in Versalien mit Archivo Black
Die Rahmen: alles hat dicke schwarze Rahmen
Die Schatten: hart und versetzt statt weicher Weichzeichnung
Die Ecken: null border-radius, scharf und kantig
Die Note: von „Firmenbroschüre" zu „Indie-Start-up mit Attitüde"

Das ist dieselbe Komponentenstruktur, dasselbe Layout, aber es fühlt sich völlig anders an. An diese Seite werden sich die Leute erinnern.

Sehen wir uns ein komplexeres Beispiel an: eine Statistikkarte für ein Dashboard.

Vorher: Ein fades 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>
  );
}

Nachher: Ein brutales 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>
  );
}

Was ist anders?

Color-Blocking: Jede Karte hat einen eigenen Hintergrund (Gelb, Weiß, Schwarz)
Kräftige Typografie: Die Zahlen sind riesig und nutzen die Display-Schrift
Hoher Kontrast: Weißer Text auf Schwarz erzeugt eine sofortige visuelle Hierarchie
Labels in Versalien: lassen alles bewusster und kräftiger wirken
Pfeile statt Farbe: nutzt die Symbole ▲ und ▼ für Klarheit

Dieselben Daten, eine völlig andere Präsentation. Die brutale Version wirkt selbstsicher und durchdacht, nicht bloß zusammengebaut.

Profi-Tipps für neobrutalistisches Design

Jetzt, wo du die Grundlagen draufhast, hier ein paar Tipps, um die Ästhetik wirklich zu treffen:

1. Umarme die Asymmetrie

Scheu dich nicht, das Raster zu durchbrechen. Versetze Elemente, überlappe Rahmen, lass die Dinge ungleichmäßig atmen. Perfektion ist langweilig.

2. Setze Farbe mit Absicht ein

Der Neobrutalismus liebt kontrastreiche Farbkombinationen. Schwarz und Weiß als Basis, dann füge ein oder zwei Akzentfarben hinzu (Gelb, Pink, Cyan). Kein Regenbogen: Wähle eine Note und leg dich fest.

3. Klotze bei der Typografie

Überschriften sollten RIESIG sein. Der Fließtext darf normal sein, aber deine H1 sollten Aufmerksamkeit fordern. Nutze kräftige Versalien, wenn du ein Statement setzen willst.

4. Füge Mikrointeraktionen hinzu

Brutal heißt nicht statisch. Füge Hover-Effekte hinzu, bei denen Buttons sich leicht verschieben oder Schatten größer werden. Halte es dezent, aber spürbar.

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

5. Übertreib es nicht

Nicht jedes Element braucht einen dicken Rahmen. Nicht jeder Abschnitt braucht einen grellen Hintergrund. Balance ist weiterhin wichtig, nur eben Richtung Kühnheit verschoben.

Was du als Nächstes tun kannst

Glückwunsch. Du hast deinem React-Projekt gerade in etwa 10 Minuten eine komplette visuelle Überholung verpasst. Das kannst du von hier aus tun:

Entdecke mehr Komponenten

Neobrutalism hat eine vollständige Bibliothek von Komponenten: Badges, Dialoge, Tabellen, Tabs und mehr. Sieh dir die Komponenten-Doku an und entdecke, was du sonst noch hinzufügen kannst.

Passe dein Theme an

Spiel mit den CSS-Variablen, damit sie zu deiner Marke passen. Ändere Akzentfarben, passe die Intensität der Schatten an oder justiere die Abstände, um es zu deinem zu machen.

Bau etwas Cooles

Jetzt, wo deine App nicht mehr generisch aussieht, zeig sie her. Teile sie auf Twitter, poste sie auf Reddit, füge sie deinem Portfolio hinzu. Neobrutalismus fällt auf.

Werde Teil der Community

Neobrutalism hat einen aktiven Discord, in dem Designer und Entwickler Projekte teilen, Fragen stellen und über brutales Design fachsimpeln. Schau vorbei und sag Hallo.

Abschließende Gedanken

Die meisten React-Apps sehen gleich aus, weil die meisten Entwickler zu denselben Werkzeugen greifen: Material UI, Bootstrap, shadcn mit Standardeinstellungen. An denen ist nichts verkehrt (sie sind großartig), aber sie helfen dir nicht, herauszustechen.

Neobrutalismus ist eine Abkürzung zur Persönlichkeit. Er ist mutig, einprägsam und erstaunlich leicht umzusetzen, wenn man die richtigen Werkzeuge hat. Neobrutalism gibt dir alles, was du für den Umstieg brauchst, ohne von Grund auf neu zu bauen.

In nur 10 Minuten bist du von „noch eine React-App" zu „Moment, was ist DAS?" gekommen. Und ehrlich? Das ist ziemlich stark.

Also los: Mach deine App unmöglich zu ignorieren.

Jetzt raus mit dir und bau etwas Brutales. 🚀

← Zurück zu den Artikeln

So verwandelst du jedes React-Projekt in 10 Minuten in Neobrutalismus

Was zum Kuckuck ist Neobrutalismus überhaupt?

Warum Neobrutalism?

Schritt 1: Richte dein Projekt ein (2 Minuten)

Schritt 2: Installiere Neobrutalism (1 Minute)

Schritt 3: Füge das neobrutalistische Theme hinzu (2 Minuten)

Schritt 4: Installiere deine ersten Komponenten (2 Minuten)

Schritt 5: Tausche deine Komponenten aus (2 Minuten)

Schritt 6: Füge neobrutalistische Schriften hinzu (1 Minute)

Schritt 7: Feinschliff und Anpassung (optional)

Vorher und nachher: Die Verwandlung

Vorher: Eine generische React-App

Nachher: Der neobrutalistische Umbau

Noch ein Beispiel: Dashboard-Widget

Vorher: Ein fades Dashboard

Nachher: Ein brutales Dashboard

Profi-Tipps für neobrutalistisches Design

Was du als Nächstes tun kannst

Abschließende Gedanken

So baust du eine neobrutalistische Website mit Tailwind CSS v4 (Schritt für Schritt)

Die 8 besten React-Animationsbibliotheken 2026

20 neobrutalistische Farbpaletten mit Hex-Codes (fertig zum Kopieren und Einfügen)

So verwandelst du jedes React-Projekt in 10 Minuten in Neobrutalismus

Was zum Kuckuck ist Neobrutalismus überhaupt?

Warum Neobrutalism?

Schritt 1: Richte dein Projekt ein (2 Minuten)

Schritt 2: Installiere Neobrutalism (1 Minute)

Schritt 3: Füge das neobrutalistische Theme hinzu (2 Minuten)

Schritt 4: Installiere deine ersten Komponenten (2 Minuten)

Schritt 5: Tausche deine Komponenten aus (2 Minuten)

Schritt 6: Füge neobrutalistische Schriften hinzu (1 Minute)

Schritt 7: Feinschliff und Anpassung (optional)

Vorher und nachher: Die Verwandlung

Vorher: Eine generische React-App

Nachher: Der neobrutalistische Umbau

Noch ein Beispiel: Dashboard-Widget

Vorher: Ein fades Dashboard

Nachher: Ein brutales Dashboard

Profi-Tipps für neobrutalistisches Design

Was du als Nächstes tun kannst

Abschließende Gedanken

Ähnliche Artikel

So baust du eine neobrutalistische Website mit Tailwind CSS v4 (Schritt für Schritt)

Die 8 besten React-Animationsbibliotheken 2026

20 neobrutalistische Farbpaletten mit Hex-Codes (fertig zum Kopieren und Einfügen)