الانتقال إلى المحتوى
1.6k

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. تشغيل التهيئة

هيّئ shadcn في مشروعك. يؤدي هذا إلى إنشاء components.json وربط مساراتك و Tailwind:

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

3. إضافة سجل Neobrutalism

أضف سجلات 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 { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

هذا كل شيء 🚀 — أضف نسخة Radix أو Base UI من أي مكوّن بالطريقة نفسها.