Zum Inhalt springen
1.6k

Next.js

Richte Neobrutalism in einem Next.js-Projekt ein.

1. Erstelle dein Projekt

Erstelle eine neue Next.js-App oder überspringe diesen Schritt, um eine bestehende zu verwenden:

pnpm create next-app@latest my-app --typescript --tailwind --app
npx create-next-app@latest my-app --typescript --tailwind --app
yarn create next-app@latest my-app --typescript --tailwind --app
bunx --bun create-next-app@latest my-app --typescript --tailwind --app

2. Führe die Initialisierung aus

Initialisiere shadcn in deinem Projekt. Dabei wird eine components.json erstellt und deine Pfade sowie Tailwind werden eingerichtet:

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

3. Neobrutalism-Registry hinzufügen

Füge die Neobrutalism-Registries zu deiner components.json hinzu:

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

4. Schriften & Theme hinzufügen

Folge den Schritten unter Schriften & Theme, um den markanten Neobrutalism-Look zu erhalten – Archivo Black-Überschriften, Space Grotesk-Fließtext und die neobrutalistischen Farb- und Schatten-Tokens.

5. Komponente hinzufügen

pnpm dlx shadcn@latest add @neobrutalism/button
npx shadcn@latest add @neobrutalism/button
yarn dlx shadcn@latest add @neobrutalism/button
bunx --bun shadcn@latest add @neobrutalism/button

Importiere sie dann und verwende sie:

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

Das war's 🚀 – füge die Radix- oder Base UI-Variante jeder Komponente auf dieselbe Weise hinzu.