Lewati ke konten
1.6k

Next.js

Siapkan Neobrutalism dalam proyek Next.js.

1. Buat proyek Anda

Buat aplikasi Next.js baru, atau lewati langkah ini untuk menggunakan yang sudah ada:

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. Jalankan init

Inisialisasi shadcn di proyek Anda. Ini membuat components.json dan mengatur path serta Tailwind Anda:

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

3. Tambahkan registri Neobrutalism

Tambahkan registri Neobrutalism ke components.json Anda:

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

4. Tambahkan font & tema

Ikuti langkah-langkah Font & Tema untuk mendapatkan tampilan khas Neobrutalism — heading Archivo Black, teks isi Space Grotesk, dan token warna + bayangan neobrutalis.

5. Tambahkan komponen

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

Lalu impor dan gunakan:

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

Selesai 🚀 — tambahkan varian Radix atau Base UI dari komponen apa pun dengan cara yang sama.