Naar inhoud
1.6k

Next.js

Stel Neobrutalism in een Next.js-project in.

1. Maak je project aan

Maak een nieuwe Next.js-app aan, of sla deze stap over om een bestaande te gebruiken:

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. Voer de init uit

Initialiseer shadcn in je project. Dit maakt een components.json aan en configureert je paden en Tailwind:

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

3. De Neobrutalism-registry toevoegen

Voeg de Neobrutalism-registries toe aan je components.json:

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

4. De lettertypen en het thema toevoegen

Volg de stappen bij Lettertypen en thema om de kenmerkende Neobrutalism-look te krijgen — Archivo Black-koppen, Space Grotesk-bodytekst en de neobrutalistische kleur- en schaduwtokens.

5. Een component toevoegen

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

Importeer hem vervolgens en gebruik hem:

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

Dat is alles 🚀 — voeg de Radix- of Base UI-variant van elke component op dezelfde manier toe.