بخشها
کامپوننتها
1. پروژهٔ خود را بسازید#
یک برنامهٔ جدید Next.js بسازید، یا برای استفاده از یک برنامهٔ موجود این مرحله را رد کنید:
pnpm create next-app@latest my-app --typescript --tailwind --appnpx create-next-app@latest my-app --typescript --tailwind --appyarn create next-app@latest my-app --typescript --tailwind --appbunx --bun create-next-app@latest my-app --typescript --tailwind --app
2. اجرای init#
shadcn را در پروژهٔ خود مقداردهی اولیه کنید. این کار یک components.json میسازد و مسیرها و
Tailwind شما را پیکربندی میکند:
pnpm dlx shadcn@latest initnpx shadcn@latest inityarn dlx shadcn@latest initbunx --bun shadcn@latest init
3. افزودن registry مربوط به Neobrutalism#
registryهای Neobrutalism را به 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/buttonnpx shadcn@latest add @neobrutalism/buttonyarn dlx shadcn@latest add @neobrutalism/buttonbunx --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 هر مؤلفهای را به همین روش اضافه کنید.