Przejdź do treści
1.6k

Next.js

Skonfiguruj Neobrutalism w projekcie Next.js.

1. Utwórz swój projekt

Utwórz nową aplikację Next.js lub pomiń ten krok, aby użyć istniejącej:

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. Uruchom inicjalizację

Zainicjuj shadcn w swoim projekcie. Utworzy to components.json oraz skonfiguruje twoje ścieżki i Tailwind:

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

3. Dodaj rejestr Neobrutalism

Dodaj rejestry Neobrutalism do swojego components.json:

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

4. Dodaj czcionki i motyw

Wykonaj kroki z sekcji Czcionki i motyw, aby uzyskać charakterystyczny wygląd Neobrutalism — nagłówki Archivo Black, tekst główny Space Grotesk oraz neobrutalistyczne tokeny kolorów i cieni.

5. Dodaj komponent

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

Następnie zaimportuj go i użyj:

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

To wszystko 🚀 — wariant Radix lub Base UI dowolnego komponentu dodasz w ten sam sposób.