1 במאי 2026

react נאו-ברוטליזם עיצוב ממשק מדריך retroui

המרת כל פרויקט React לנאו-ברוטליזם ב-10 דקות

רוצים לתת לאפליקציית React המשעממת שלכם מהפך נועז? למדו איך להפוך כל פרויקט React לעיצוב נאו-ברוטליסטי מרהיב תוך 10 דקות בלבד עם Neobrutalism. מדריך שלב אחר שלב עם דוגמאות before/after.

Dov Azencot

@DovAzencot

שיתוף ב-X

בואו נדבר בכנות: אפליקציית ה-React שלכם כנראה נראית כמו כל אפליקציית React אחרת בחוץ. נקייה? בטח. מקצועית? בהחלט. בלתי נשכחת? ממש לא.

אבל מה אם הייתי אומר לכם שתוך 10 דקות בלבד אתם יכולים להפוך את הפרויקט הגנרי שלכם למשהו עם אישיות? משהו שגורם לאנשים להגיד "וואו, מה זה?"

זה הכוח של נאו-ברוטליזם - סגנון עיצוב נועז, בלי התנצלויות, ובלתי אפשרי להתעלמות. ועם Neobrutalism, המרת פרויקט ה-React שלכם קלה עד גיחוך.

קחו קפה (או משקה אנרגיה, בלי שיפוטים), ובואו נהפוך את האפליקציה הווניל הזו למשהו חריף.

מה זה בעצם נאו-ברוטליזם

לפני שצוללים פנימה, בואו נסתנכרן. נאו-ברוטליזם הוא תנועת עיצוב ששואבת השראה מהאדריכלות הברוטליסטית הגולמית ועתירת הבטון של שנות ה-50, ונותנת לה טוויסט מודרני ודיגיטלי.

תחשבו על:

מסגרות שחורות עבות על הכול
צללים קשיחים (בלי שטויות של טשטוש רך)
צבעים בניגודיות גבוהה כמו שחור, לבן וצהוב ניאון
אפס פינות מעוגלות (חד וזוויתי, מותק)
פריסות אסימטריות ששוברות את הרשת

זה אנטי-פרפקציוניזם. זה מרדני. זה המקבילה העיצובית ללבישת ז'קט עור לישיבת דירקטוריון. וזה עובד.

למה Neobrutalism

אתם יכולים לבנות קומפוננטות נאו-ברוטליסטיות מאפס, אבל למה להמציא את הגלגל מחדש כשיש Neobrutalism? זו ספריית UI ל-React שנבנתה במיוחד לנאו-ברוטליזם, עם:

קומפוננטות מוכנות עם האסתטיקה הברוטלית האופיינית
התקנה קלה דרך CLI
התאמה מלאה עם Tailwind CSS
עבודה עם Next.js, Vite, Remix - בעצם כל הקמה של React

בנוסף, זה חינמי וקוד פתוח. בואו נתחיל.

שלב 1: הקמת הפרויקט (2 דקות)

קודם כול הדברים החשובים. אם אתם עובדים עם פרויקט React קיים, אתם כבר מקדימים. אם לא, בואו נרים אפליקציית Next.js מהירה (אבל זה עובד לכל פריימוורק של React).


pnpm create next-app@latest my-brutal-app
cd my-brutal-app
npx create-next-app@latest my-brutal-app
cd my-brutal-app
yarn create next-app@latest my-brutal-app
cd my-brutal-app
bunx --bun create-next-app@latest my-brutal-app
cd my-brutal-app

אמרו כן ל-TypeScript ול-Tailwind CSS כשתישאלו. נצטרך את שניהם.

אם אתם משתמשים ב-Vite או ב-Create React App, גם זה מעולה - ההקמה כמעט זהה.

שלב 2: התקנת Neobrutalism (דקה 1)

עכשיו לקסם. אנחנו צריכים לאתחל את shadcn (Neobrutalism משתמש בו מתחת למכסה המנוע) ולהתקין את היוטיליטיז של Neobrutalism.

הריצו את הפקודה הזו:


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

תקבלו כמה שאלות. הנה מה שכדאי לכם לבחור:

Style: Default
Base color: Slate (לא ממש משנה, נדרוס את זה)
CSS variables: Yes

עכשיו התקינו את היוטיליטיז של Neobrutalism:


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

זהו. זה הכול. עכשיו יש לכם את הבסיס לבניית ממשקים ברוטליסטיים.

שלב 3: הוספת הת'ים הנאו-ברוטליסטי (2 דקות)

כאן המהפך באמת מתחיל. פתחו את קובץ ה-global.css שלכם (בדרך כלל ב-app/globals.css או ב-src/index.css) והחליפו את משתני הת'ים בת'ים הברוטלי האופייני של Neobrutalism.

הדביקו את זה ב-CSS שלכם:

@theme {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: 0;
 
  --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-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-border: var(--border);
}
 
:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --border: #000;
}
 
.dark {
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --border: #3a3a3a;
}

מה בדיוק קרה?

ביטלנו את כל ה-border-radius (סוף לפינות מעוגלות)
החלפנו צללים רכים בצללים קשיחים ומוזחים
הגדרנו ערכת צבעים נועזת של שחור/לבן/צהוב
הוספנו תמיכה במצב כהה (כי אנחנו לא פראים)

כבר עכשיו האפליקציה שלכם מתחילה להיראות אחרת. אבל עוד לא סיימנו.

שלב 4: התקנת הקומפוננטות הראשונות (2 דקות)

בואו נביא כמה קומפוננטות אמיתיות. נתחיל מהחיוניות: Button, Card ו-Input.

הריצו את הפקודות האלה אחת אחרי השנייה:


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

כל קומפוננטה נוספת לתיקיית components/neobrutalism/ שלכם, מוכנה לשימוש. אין צורך לכתוב אפילו שורת CSS אחת.

שלב 5: החלפת הקומפוננטות (2 דקות)

עכשיו מגיע החלק הכיפי - החלפת הקומפוננטות המשעממות והישנות שלכם בברוטליות החדשות.

לפני:

// Your old, generic button
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

אחרי:

import { Button } from "@/components/neobrutalism/Button";
 
<Button>Click Me</Button>

וכך פשוט, יש לכם כפתור עם מסגרות שחורות עבות, צל קשיח, והוייב הנאו-ברוטליסטי האופייני.

בואו נעשה את אותו הדבר לכרטיס:

לפני:

<div className="bg-white shadow-lg rounded-lg p-6">
  <h2 className="text-2xl font-bold">My Card</h2>
  <p className="text-gray-600">Some generic content here.</p>
</div>

אחרי:

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/neobrutalism/Card";
 
<Card>
  <CardHeader>
    <CardTitle>My Card</CardTitle>
    <CardDescription>Now with 100% more attitude.</CardDescription>
  </CardHeader>
  <CardContent>
    Some bold content here.
  </CardContent>
</Card>

אותו מבנה, וייב שונה לגמרי. עכשיו לכרטיס יש פינות חדות, מסגרות נועזות, וצל קשיח שגורם לו לקפוץ מהדף.

שלב 6: הוספת פונטים נאו-ברוטליסטיים (דקה 1)

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

אם אתם משתמשים ב-Next.js, הוסיפו את זה ל-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"],
  weight: "400",
  variable: "--font-sans",
  display: "swap",
});
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  );
}

עכשיו הכותרות שלכם מסיביות ונועזות, בעוד טקסט הגוף נשאר נקי וקריא.

שלב 7: כוונון עדין והתאמה אישית (רשות)

בעצם סיימתם בשלב הזה, אבל אם אתם רוצים להתאים עוד, Neobrutalism מקל על זה.

רוצים צבע הדגשה אחר? שנו את המשתנה --primary ב-CSS שלכם.

:root {
  --primary: #ff006e; /* Hot pink instead of yellow */
}

רוצים צללים רכים יותר? כווננו את משתני הצל.

--shadow: 2px 2px 0 0 var(--border); /* Smaller offset */

רוצים להוסיף עוד קומפוננטות? הציצו בספרייה המלאה ב-neobrutalism.com/docs/components. יש שם inputs, badges, dialogs, tables ועוד - כולם מעוצבים באסתטיקה הברוטלית.

לפני ואחרי: המהפך

טוב, בואו נראה את ההבדל. הנה איך נראה דף נחיתה פשוט לפני ואחרי ההמרה הנאו-ברוטליסטית.

לפני: אפליקציית React גנרית

export default function GenericLanding() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="max-w-md bg-white shadow-lg rounded-lg p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-4">
          Welcome to My App
        </h1>
        <p className="text-gray-600 mb-6">
          This is a clean, minimal design that looks like every other React app.
        </p>
        <input
          type="email"
          placeholder="Enter your email"
          className="w-full px-4 py-2 border border-gray-300 rounded mb-4"
        />
        <button className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          Get Started
        </button>
      </div>
    </div>
  );
}

מה לא בסדר בזה?

טכנית, כלום. זה פונקציונלי. זה נקי. אבל זה גם נשכח לגמרי. אם הייתם מראים את זה ל-100 אנשים, הם היו מבלבלים את זה עם עשרות אתרים אחרים שהם ראו השבוע.

אחרי: מהפך נאו-ברוטליסטי

import { Button } from "@/components/neobrutalism/Button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/neobrutalism/Card";
import { Input } from "@/components/neobrutalism/Input";
 
export default function BrutalLanding() {
  return (
    <div className="min-h-screen bg-[#ffdb33] flex items-center justify-center p-4">
      <Card className="max-w-md w-full">
        <CardHeader>
          <CardTitle className="text-4xl font-head uppercase">
            Welcome to My App
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-lg font-sans">
            This is a bold, memorable design that actually stands out.
          </p>
          <Input type="email" placeholder="Enter your email" />
          <Button className="w-full">Get Started</Button>
        </CardContent>
      </Card>
    </div>
  );
}

מה השתנה?

רקע: עבר מאפור משעמם לצהוב זוהר
טיפוגרפיה: השתמשנו בכותרת נועזת ובאותיות גדולות עם Archivo Black
מסגרות: לכל דבר יש מסגרות שחורות עבות
צללים: צללים קשיחים ומוזחים במקום טשטושים רכים
פינות: אפס border-radius - חד וזוויתי
וייב: מ"חוברת תאגידית" ל"סטארטאפ עצמאי עם אופי"

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

דוגמה נוספת: וידג'ט דשבורד

בואו נסתכל על דוגמה מורכבת יותר - כרטיס סטטיסטיקות בדשבורד.

לפני: דשבורד תפל

export default function GenericStats() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Total Users</p>
        <p className="text-3xl font-bold text-gray-900">1,284</p>
        <p className="text-green-500 text-sm">+12% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Revenue</p>
        <p className="text-3xl font-bold text-gray-900">$52,340</p>
        <p className="text-green-500 text-sm">+8% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Active Now</p>
        <p className="text-3xl font-bold text-gray-900">127</p>
        <p className="text-red-500 text-sm">-3% from last hour</p>
      </div>
    </div>
  );
}

אחרי: דשבורד ברוטלי

import { Card, CardContent } from "@/components/neobrutalism/Card";
 
export default function BrutalStats() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <Card className="bg-[#ffdb33]">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Total Users</p>
          <p className="text-5xl font-head mb-2">1,284</p>
          <p className="text-sm font-bold">▲ 12% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Revenue</p>
          <p className="text-5xl font-head mb-2">$52,340</p>
          <p className="text-sm font-bold">▲ 8% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-black text-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Active Now</p>
          <p className="text-5xl font-head mb-2">127</p>
          <p className="text-sm font-bold">▼ 3% from last hour</p>
        </CardContent>
      </Card>
    </div>
  );
}

מה שונה?

בלוקים של צבע: לכל כרטיס רקע מובחן (צהוב, לבן, שחור)
טיפוגרפיה נועזת: המספרים ענקיים ומשתמשים בפונט התצוגה
ניגודיות גבוהה: טקסט לבן על שחור יוצר היררכיה ויזואלית מיידית
תוויות באותיות גדולות: גורמות לכל דבר להרגיש יותר מכוון ונועז
חצים במקום צבע: משתמשים בסמלים ▲ ו-▼ לבהירות

אותם נתונים, הצגה שונה לגמרי. הגרסה הברוטלית מרגישה בטוחה ומעוצבת, לא סתם מורכבת מחלקים.

טיפים למקצוענים לעיצוב נאו-ברוטליסטי

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

1. אמצו אסימטריה

אל תפחדו לשבור את הרשת. הזיזו אלמנטים, חפפו מסגרות, תנו לדברים לנשום באופן לא אחיד. שלמות היא משעממת.

2. השתמשו בצבע במכוון

נאו-ברוטליזם אוהב שילובי צבעים בניגודיות גבוהה. שחור ולבן כבסיס שלכם, ואז הוסיפו צבע הדגשה אחד או שניים (צהוב, ורוד, ציאן). אל תלכו על קשת בענן - בחרו וייב והתחייבו אליו.

3. לכו בגדול על טיפוגרפיה

הכותרות צריכות להיות מסיביות. טקסט הגוף יכול להיות רגיל, אבל ה-H1 שלכם צריך למשוך תשומת לב. השתמשו באותיות נועזות וגדולות כשאתם רוצים להצהיר הצהרה.

4. הוסיפו מיקרו-אינטראקציות

ברוטלי לא אומר סטטי. הוסיפו אפקטי hover שבהם הכפתורים זזים מעט או הצללים גדלים. שמרו על זה עדין אבל מורגש.

<Button className="hover:translate-x-1 hover:translate-y-1 transition-transform">
  Click Me
</Button>

5. אל תגזימו

לא כל אלמנט צריך מסגרת עבה. לא כל סקשן צריך רקע בהיר. איזון עדיין חשוב - רק נוטה לכיוון הנועזות.

מה לעשות עכשיו

כל הכבוד. בדיוק נתתם לפרויקט ה-React שלכם שיפוץ ויזואלי מלא בערך ב-10 דקות. הנה מה שאתם יכולים לעשות מכאן:

גלו עוד קומפוננטות

ל-Neobrutalism יש ספרייה מלאה של קומפוננטות - badges, dialogs, tables, tabs ועוד. הציצו ב-תיעוד הקומפוננטות וראו מה עוד אפשר להוסיף.

התאימו את הת'ים שלכם

שחקו עם משתני ה-CSS כדי להתאים למותג שלכם. שנו צבעי הדגשה, כווננו את עוצמת הצל, או התאימו ריווח כדי להפוך אותו לשלכם.

בנו משהו מגניב

עכשיו כשהאפליקציה שלכם לא נראית גנרית, הראו אותה. שתפו אותה בטוויטר, פרסמו אותה ב-Reddit, הוסיפו אותה לפורטפוליו שלכם. אנשים שמים לב לנאו-ברוטליזם.

הצטרפו לקהילה

ל-Neobrutalism יש Discord פעיל שבו מעצבים ומפתחים משתפים פרויקטים, שואלים שאלות ומתלהבים מעיצוב ברוטלי. קפצו פנימה ותגידו שלום.

מחשבות לסיום

רוב אפליקציות ה-React נראות אותו דבר כי רוב המפתחים מושיטים יד לאותם כלים - Material UI, Bootstrap, shadcn עם הגדרות ברירת המחדל. אין בזה שום דבר רע (הם מעולים), אבל הם לא יעזרו לכם לבלוט.

נאו-ברוטליזם הוא קיצור דרך לאישיות. הוא נועז, בלתי נשכח, ומפתיע כמה קל ליישם אותו עם הכלים הנכונים. Neobrutalism נותן לכם כל מה שצריך כדי לעשות את המעבר בלי לבנות הכול מחדש מאפס.

תוך 10 דקות בלבד עברתם מ"עוד אפליקציית React" ל"רגע, מה זה?" ובאמת? זה עוצמתי.

אז קדימה - הפכו את האפליקציה שלכם לבלתי אפשרית להתעלמות.

עכשיו צאו החוצה ובנו משהו ברוטלי. 🚀

→ חזרה לבלוג

המרת כל פרויקט React לנאו-ברוטליזם ב-10 דקות

מה זה בעצם נאו-ברוטליזם

למה Neobrutalism

שלב 1: הקמת הפרויקט (2 דקות)

שלב 2: התקנת Neobrutalism (דקה 1)

שלב 3: הוספת הת'ים הנאו-ברוטליסטי (2 דקות)

שלב 4: התקנת הקומפוננטות הראשונות (2 דקות)

שלב 5: החלפת הקומפוננטות (2 דקות)

שלב 6: הוספת פונטים נאו-ברוטליסטיים (דקה 1)

שלב 7: כוונון עדין והתאמה אישית (רשות)

לפני ואחרי: המהפך

לפני: אפליקציית React גנרית

אחרי: מהפך נאו-ברוטליסטי

דוגמה נוספת: וידג'ט דשבורד

לפני: דשבורד תפל

אחרי: דשבורד ברוטלי

טיפים למקצוענים לעיצוב נאו-ברוטליסטי

מה לעשות עכשיו

מחשבות לסיום

בניית אתר נאו-ברוטליסטי עם Tailwind CSS v4 - מדריך מלא

8 ספריות האנימציה המובילות ל-React ב-2026

20 פלטות צבעים לניאו-ברוטליזם עם קודי Hex (מוכנות להעתקה)

המרת כל פרויקט React לנאו-ברוטליזם ב-10 דקות

מה זה בעצם נאו-ברוטליזם

למה Neobrutalism

שלב 1: הקמת הפרויקט (2 דקות)

שלב 2: התקנת Neobrutalism (דקה 1)

שלב 3: הוספת הת'ים הנאו-ברוטליסטי (2 דקות)

שלב 4: התקנת הקומפוננטות הראשונות (2 דקות)

שלב 5: החלפת הקומפוננטות (2 דקות)

שלב 6: הוספת פונטים נאו-ברוטליסטיים (דקה 1)

שלב 7: כוונון עדין והתאמה אישית (רשות)

לפני ואחרי: המהפך

לפני: אפליקציית React גנרית

אחרי: מהפך נאו-ברוטליסטי

דוגמה נוספת: וידג'ט דשבורד

לפני: דשבורד תפל

אחרי: דשבורד ברוטלי

טיפים למקצוענים לעיצוב נאו-ברוטליסטי

מה לעשות עכשיו

מחשבות לסיום

עוד בנושא

בניית אתר נאו-ברוטליסטי עם Tailwind CSS v4 - מדריך מלא

8 ספריות האנימציה המובילות ל-React ב-2026

20 פלטות צבעים לניאו-ברוטליזם עם קודי Hex (מוכנות להעתקה)