דילוג לתוכן
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 של כל רכיב באותו האופן.