پرش به محتوا

Next.js

Neobrutalism را در یک پروژهٔ Next.js راه‌اندازی کنید.

1. پروژهٔ خود را بسازید

یک برنامهٔ جدید Next.js بسازید، یا برای استفاده از یک برنامهٔ موجود این مرحله را رد کنید:

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

shadcn را در پروژهٔ خود مقداردهی اولیه کنید. این کار یک components.json می‌سازد و مسیرها و Tailwind شما را پیکربندی می‌کند:

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

3. افزودن registry مربوط به Neobrutalism

registryهای Neobrutalism را به components.json خود اضافه کنید:

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

4. افزودن فونت‌ها و پوسته

مراحل فونت‌ها و پوسته را دنبال کنید تا ظاهر شاخص Neobrutalism را به دست آورید — عنوان‌های Archivo Black، متن اصلی Space Grotesk و توکن‌های رنگ و سایهٔ نئوبروتالیستی.

5. افزودن یک مؤلفه

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

سپس آن را import کرده و استفاده کنید:

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

همین 🚀 — نسخهٔ Radix یا Base UI هر مؤلفه‌ای را به همین روش اضافه کنید.