Installation

Installiere neobrutalistische React-Komponenten mit einem einzigen shadcn-CLI-Befehl – ohne Paket, ohne Konfiguration. Dazu die Schriften und Tailwind-v4-Tokens hinter dem typischen Look.

Neobrutalism.com ist ein Register für das „shadcn“ (CLI). Du musst kein Paket installieren und deine App nicht in einen Provider einbinden – das CLI kopiert den Quellcode jeder Komponente von neobrutalism.com in dein Projekt, und ab diesem Zeitpunkt gehört der Code dir.

Die Einrichtung erfolgt in drei Schritten und dauert etwa fünf Minuten:

Eine Komponente installieren – ein Befehl, keine Konfiguration.
Füge die Schriftarten hinzu – „Archivo Black“ für Überschriften und „Space Grotesk“ für den Fließtext.
Füge die typischen Stilelemente hinzu – die Rahmen, Schatten und die Farbpalette, die den Neobrutalismus ausmachen.

Eine Komponente installieren

Jede Komponente wird in zwei Varianten ausgeliefert: „Base UI“und „Radix UI“. Die Installations-URL entscheidet, welche Variante du erhältst:


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


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

Das war’s schon mit der Installation. Ersetze einfach button durch eine beliebige Komponente – das Muster lautet immer https://neobrutalism.com/r/<base|radix>/<component>.json, und auf jeder Komponentenseite findest du den genauen Befehl für beide Varianten.

Füge die Schriftarten hinzu

Überschriften werden in „Archivo Black“ festgelegt, der Fließtext in „Space Grotesk“. Mit Next.js lädst du sie von „next/font/google“:

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"],
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

Thema hinzufügen

Füge diese Tokens in deine globals.css ein. Die hart abgegrenzten Schatten und die --radius: 0 erledigen den Großteil der Arbeit – der Rest liegt an der Farbpalette, und alles zusammen ist einfaches Tailwind-v4-Styling, das du später ändern kannst:

globals.css

@import "tailwindcss";
 
@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --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-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0;
  --background: #fff7e8;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #efe7d6;
  --muted-foreground: #6b6355;
  --accent: #ffe7a3;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --input: #fff;
  --ring: #000;
}
 
.dark {
  --background: #1a1815;
  --foreground: #f5f0e6;
  --card: #262320;
  --card-foreground: #f5f0e6;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #3a352f;
  --secondary-foreground: #f5f0e6;
  --muted: #2e2a24;
  --muted-foreground: #b3ac9e;
  --accent: #38342b;
  --accent-foreground: #f5f0e6;
  --destructive: #ff6b6b;
  --destructive-foreground: #1a1815;
  --border: #000;
  --input: #262320;
  --ring: #ffdc58;
}

Fängst du ein neues Projekt an?

Die Anleitungen zum Framework führen dich Schritt für Schritt durch alles, angefangen beim ersten Befehl:

Next.js – „create-next-app“, „init“, „fonts“, „theme“, erste Komponente.
Vite – Tailwind, Pfad-Aliase, Init, erste Komponente.

Vorschau vor der Installation

Überprüfe den Quellcode einer beliebigen Komponente über das Terminal:


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

Registry-Namespaces (optional)

Vollständige URLs sind alles, was du jemals brauchst. Wenn du jedoch den Server „MCP“ einrichtest – der Komponenten über benannte Registries auflöst – oder die Befehle „search“ und „list“ des CLI nutzen möchtest, richte in deiner „components.json“ einen Alias für die Registry ein:

components.json

{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

Sobald der Alias eingerichtet ist, kann der CLI die gesamte Registrierungsdatenbank durchsuchen:


pnpm dlx shadcn@latest search @neobrutalism
npx shadcn@latest search @neobrutalism
yarn dlx shadcn@latest search @neobrutalism
bunx --bun shadcn@latest search @neobrutalism


pnpm dlx shadcn@latest list @neobrutalism
npx shadcn@latest list @neobrutalism
yarn dlx shadcn@latest list @neobrutalism
bunx --bun shadcn@latest list @neobrutalism

Monorepos

Richte den CLI auf den richtigen Arbeitsbereich aus, und zwar über -c / --cwd:


pnpm dlx shadcn@latest init -c ./apps/web
npx shadcn@latest init -c ./apps/web
yarn dlx shadcn@latest init -c ./apps/web
bunx --bun shadcn@latest init -c ./apps/web


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

Brauchst du Hilfe?

Hast du ein Problem? Unser Discord ist aktiv – schau doch mal vorbei und sag Hallo.

→ Discord-Community