İçeriğe atla
1.6k

Next.js

Neobrutalism'yı bir Next.js projesinde kurun.

1. Projenizi oluşturun

Yeni bir Next.js uygulaması oluşturun ya da mevcut birini kullanmak için bu adımı atlayın:

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. Init'i çalıştırın

Projenizde shadcn'i başlatın. Bu, bir components.json oluşturur ve yollarınızı ve Tailwind'i yapılandırır:

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

3. Neobrutalism registry'sini ekleyin

Neobrutalism registry'lerini components.json dosyanıza ekleyin:

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

4. Yazı tiplerini ve temayı ekleyin

Neobrutalism'nın kendine özgü görünümünü elde etmek için Yazı Tipleri ve Tema adımlarını izleyin — Archivo Black başlıklar, Space Grotesk gövde metni ve neobrütalist renk ve gölge token'ları.

5. Bir bileşen ekleyin

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

Ardından içe aktarıp kullanın:

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

Hepsi bu 🚀 — herhangi bir bileşenin Radix veya Base UI varyantını aynı şekilde ekleyin.