מבוא

מהו ניאו-ברוטליזם?#

ניאו-ברוטליזם הוא סגנון עיצוב אתרים שצמח בסוף שנות ה-2010 כתגובה לאחידות של העיצוב השטוח והמינימליסטי. הסגנון מאמץ את הגולמיות של האדריכלות הברוטליסטית — חומרים אותנטיים, מבנה גלוי — ומתרגם אותה למסך באמצעות צבעים עזים וגיאומטריה שובבה.

ניתן לזהות זאת על פי חמש תכונות:

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

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

מהו Neobrutalism.com?#

Neobrutalism.com היא מערכת עיצוב המכניסה את הסגנון לאתר React — המבוססת על אותו מודל רישום כמו באתר shadcn/ui. אין צורך להתקין חבילה: הפקודה shadcn CLI מעתיקה את קוד המקור של כל רכיב לפרויקט שלך, ומאותו רגע זה כבר הקוד שלך.

מה יש בפנים:

• רכיבים — הסט המלא, המעוצב לפי קו עיצוב אחיד, כך שהמסגרות, הצללים והגופנים מתאימים זה לזה.
• בלוקים — רכיבים מוכנים מראש: דמויות מרכזיות, טבלאות מחירים, מסכי אימות, לוחות מחוונים.
• תבניות — אתרים שלמים ולוחות בקרה למנהלים.
• ערכות נושא — בונה ערכות נושא עם הגדרות קבועות מראש שניתן לשתף.
• Figma ערכה — אותה מערכת המיועדת למעצבים.
• MCP שרת — עורכי AI כגון Claude Code ו-Cursor יכולים להוסיף רכיבים לפי שם.

שני אלמנטים בסיסיים, סגנון אחד#

כל רכיב נשלח בשתי גרסאות. בחר את הגרסה הרצויה עבור כל רכיב בעת ההתקנה — כתובת ה-URL של ההתקנה קובעת איזו גרסה תקבל:

• Radix UI — הפרימיטיבים שעליהם כבר פועלים רוב הפרויקטים של shadcn.
• Base UI — הפרימיטיבים החדשים יותר של צוות Radix + MUI.

אותו מראה, אותן פונקציות ייצוא, אותו ממשק API. הנגישות — מוקד, מקלדת, תוכנות קריאת מסך — נובעת מהאלמנטים הבסיסיים שבבסיס המערכת.

תנסה את זה#

פקודה אחת, ללא הגדרה:

pnpmnpmyarnbun
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
העתקה

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