Vai al contenuto
1.6k

Next.js

Configura Neobrutalism in un progetto Next.js.

1. Crea il progetto

Crea una nuova app Next.js, oppure salta questo passaggio per usarne una esistente:

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. Esegui l'inizializzazione

Inizializza shadcn nel tuo progetto. Questo crea un components.json e configura i percorsi e Tailwind:

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

3. Aggiungi il registro di Neobrutalism

Aggiungi i registri di Neobrutalism al tuo components.json:

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

4. Aggiungi i font e il tema

Segui i passaggi di Font e tema per ottenere il look distintivo di Neobrutalism — titoli in Archivo Black, testo del corpo in Space Grotesk e i token neobrutalisti di colore e ombre.

5. Aggiungi un componente

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

Poi importalo e usalo:

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

Fatto 🚀 — aggiungi la variante Radix o Base UI di qualsiasi componente nello stesso modo.