Zum Inhalt springen
1.6k

Introduction

Was Neobrutalismus ist und wie das Neobrutalism.com-Designsystem ihn auf React umsetzt – Open-Code-Komponenten, Blöcke und Vorlagen für shadcn CLI.

Was ist Neobrutalismus?

Neobrutalismus ist ein Webdesign-Stil, der Ende der 2010er Jahre als Reaktion auf die Einheitslooks des flachen, minimalistischen Designs entstand. Er greift die Rohheit der brutalistischen Architektur – ehrliche Materialien, sichtbare Struktur – auf und überträgt sie mit kräftigen Farben und verspielter Geometrie auf den Bildschirm.

Du erkennst es an fünf Merkmalen:

  • Dicke Rahmen – jedes Element ist umrandet, meist in sattem Schwarz.
  • Harte Schatten – flache Versätze ohne Unschärfe, sodass die Elemente auf der Seite so aussehen, als wären sie physisch übereinandergestapelt.
  • Kräftige Farben – kontrastreiche, gesättigte Füllfarben. Keine Farbverläufe, kein Glassmorphismus.
  • Rechte Winkel und kräftige Schrift – eine Geometrie, die ihren Platz einnimmt, anstatt sich dafür zu entschuldigen.
  • Taktile Interaktion – Die Schaltflächen senken sich beim Klicken sichtbar in ihren Schatten ein.

Nichts schwebt, nichts verschwimmt, nichts bleibt verborgen. Das Redesign von Gumroad aus dem Jahr 2021 hat diesen Stil zum Mainstream gemacht; heute ist er die erste Wahl für Produkte, die bewusst gestaltet wirken sollen, statt wie eine Standardvorlage auszusehen.

Was ist Neobrutalism.com?

Neobrutalism.com ist ein Designsystem, das den Stil von React umsetzt – es basiert auf demselben Registry-Modell wie shadcn/ui. Du installierst kein Paket: Der Befehl „shadcn“ (CLI) kopiert den Quellcode jeder Komponente in dein Projekt, und ab diesem Zeitpunkt gehört der Code dir.

Das gibt’s darin:

  • Komponenten – das komplette Set, einheitlich gestaltet nach einem bestimmten Stil, sodass Rahmen, Schatten und Schrift zueinander passen.
  • Blöcke – vorgefertigte Elemente: Helden, Preistabellen, Anmeldebildschirme, Dashboards.
  • Vorlagen – komplette Websites und Admin-Bereiche.
  • Themes – ein Theme-Builder mit Voreinstellungen, die du teilen kannst.
  • Figma Kit – das gleiche System für Designer.
  • MCP Server – KI-Editoren wie Claude Code und Cursor können Komponenten anhand ihres Namens hinzufügen.

Zwei Grundformen, ein Stil

Jede Komponente wird in zwei Varianten ausgeliefert. Wähle bei der Installation die gewünschte Variante aus – die Installations-URL entscheidet, welche du erhältst:

  • Radix UI — die Grundelemente, auf denen die meisten shadcn-Projekte bereits laufen.
  • Base UI — die neueren Primitive vom Team Radix + „MUI“.

Gleiches Erscheinungsbild, gleiche Exporte, gleiche API. Die Barrierefreiheit – Fokus, Tastatur, Screenreader – beruht auf den zugrunde liegenden Elementen.

Probier’s mal aus

Ein Befehl, keine Konfiguration:

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

Dann geh unter „Installation“ zu den Schriftarten und Design-Tokens oder stöbere erst mal in den Komponenten.