התקנה

התקינו רכיבי React ניאו-ברוטליסטיים בפקודת shadcn CLI אחת — בלי חבילה, בלי הגדרות. כולל הגופנים וטוקני Tailwind v4 שמאחורי המראה הייחודי.

Neobrutalism.com זהו מאגר עבור פרויקט "shadcn" (CLI). אין צורך להתקין חבילה כלשהי ואין צורך לעטוף את האפליקציה שלך בספק כלשהו — ה-CLI מעתיק את קוד המקור של כל רכיב מ-neobrutalism.com אל תוך הפרויקט שלך, ומאותו רגע זה כבר הקוד שלך.

ההתקנה כוללת שלושה שלבים, ונמשכת כחמש דקות:

התקנת רכיב — פקודה אחת, ללא צורך בהגדרות.
הוסף את הגופנים — Archivo Black לכותרות, Space Grotesk לטקסט הראשי.
הוסף את האלמנטים האופייניים לסגנון — הקווים, הצללים ופלטת הצבעים שהופכים אותו ל"ניאו-ברוטליזם".

התקן רכיב

כל רכיב מסופק בשתי גרסאות: Base UI ו-Radix UI. כתובת ה-URL להתקנה קובעת איזו גרסה תקבלו:


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json


pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

זהו כל תהליך ההתקנה. החליפו את button בכל רכיב אחר — התבנית היא תמיד https://neobrutalism.com/r/<base|radix>/<component>.json, ובכל דף רכיב מוצגת הפקודה המדויקת לשתי הגרסאות.

הוסף את הגופנים

כותרות מוגדרות בגופן "Archivo Black", והטקסט הראשי בגופן "Space Grotesk". באמצעות Next.js, יש לטעון אותן מ-next/font/google:

app/layout.tsx

import { Archivo_Black, Space_Grotesk } from "next/font/google"
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
})
 
const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

הוסף את העיצוב

הוסף את האלמנטים האלה לקובץ ה-globals.css שלך. הצללים עם ה-offset הקשיח וה---radius: 0 עושים את רוב העבודה — השאר קשור לפלטת הצבעים, והכל מבוסס על עיצוב Tailwind v4 סטנדרטי שתוכל לשנות בהמשך:

globals.css

@import "tailwindcss";
 
@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0;
  --background: #fff7e8;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #efe7d6;
  --muted-foreground: #6b6355;
  --accent: #ffe7a3;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --input: #fff;
  --ring: #000;
}
 
.dark {
  --background: #1a1815;
  --foreground: #f5f0e6;
  --card: #262320;
  --card-foreground: #f5f0e6;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #3a352f;
  --secondary-foreground: #f5f0e6;
  --muted: #2e2a24;
  --muted-foreground: #b3ac9e;
  --accent: #38342b;
  --accent-foreground: #f5f0e6;
  --destructive: #ff6b6b;
  --destructive-foreground: #1a1815;
  --border: #000;
  --input: #262320;
  --ring: #ffdc58;
}

מתחילים פרויקט חדש?

המדריכים למסגרת מפרטים את כל השלבים, החל מהפקודה הראשונה:

Next.js — create-next-app, init, גופנים, ערכת נושא, הרכיב הראשון.
Vite — Tailwind, כינויים לנתיבים, init, הרכיב הראשון.

תצוגה מקדימה לפני ההתקנה

בדוק את קוד המקור של כל רכיב מהטרמינל:


pnpm dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
npx shadcn@latest view https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest view https://neobrutalism.com/r/base/button.json

מרחבי שמות ברישום (אופציונלי)

כתובות URL מלאות הן כל מה שתזדקקו לו אי פעם. אך אם אתם מגדירים את שרת ה-MCP — שמפתור רכיבים באמצעות רישומים שמותיים — או אם אתם מעוניינים להשתמש בפקודות search ו-list של ה-CLI, הגדירו כינוי לרישום ב-components.json שלכם:

components.json

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

לאחר הגדרת הכינוי, ה-CLI יכול לסרוק את הרישום כולו:


pnpm dlx shadcn@latest search @neobrutalism
npx shadcn@latest search @neobrutalism
yarn dlx shadcn@latest search @neobrutalism
bunx --bun shadcn@latest search @neobrutalism


pnpm dlx shadcn@latest list @neobrutalism
npx shadcn@latest list @neobrutalism
yarn dlx shadcn@latest list @neobrutalism
bunx --bun shadcn@latest list @neobrutalism

Monorepos

כוונו את ה-CLI לסביבת העבודה הנכונה באמצעות -c / --cwd:


pnpm dlx shadcn@latest init -c ./apps/web
npx shadcn@latest init -c ./apps/web
yarn dlx shadcn@latest init -c ./apps/web
bunx --bun shadcn@latest init -c ./apps/web


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
npx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web

זקוק לעזרה?

נתקעתם במשהו? ה-Discord פעיל — בואו להגיד שלום.

→ קהילת Discord