Introduction

نئوبروتالیسم چیست؟#

نئوبروتالیسم سبک طراحی وبی است که در اواخر دههٔ ۲۰۱۰ میلادی به‌عنوان واکنشی به یکنواختی طراحی تخت و مینیمالیستی پدید آمد. این سبک خامی معماری بروتالیستی — مصالح صادقانه و سازهٔ نمایان — را با رنگ‌های جسورانه و هندسهٔ بازیگوشانه به صفحه منتقل می‌کند.

شما می‌توانید آن را با پنج ویژگی تشخیص دهید:

• مرزهای ضخیم — هر عنصر با حاشیه‌ای، معمولاً به رنگ مشکی یکدست، احاطه شده است.
• سایه‌های تیز — جابه‌جایی‌های تخت بدون محوشدگی، به‌طوری‌که عناصر به‌صورت فیزیکی روی صفحه چیده شده باشند.
• رنگ‌های پرصدا — پرکننده‌های با کنتراست بالا و اشباع‌شده. بدون گرادیان، بدون گلس‌مورفیسم.
• گوشه‌های مربعی و قلم ضخیم — هندسه‌ای که به جای عذرخواهی از فضا، آن را اشغال می‌کند.
• تعامل لمسی — دکمه‌ها هنگام کلیک به‌صورت قابل مشاهده وارد سایه‌های خود می‌شوند.

هیچ‌چیز شناور نیست، هیچ‌چیز تار نمی‌شود، هیچ‌چیز پنهان نمی‌شود. بازطراحی سال ۲۰۲۱ Gumroad این سبک را رایج کرد؛ امروزه این سبک انتخاب نخست برای محصولاتی است که می‌خواهند عمدی به نظر برسند، نه پیش‌فرض.

Neobrutalism.com چیست؟#

Neobrutalism.com یک سیستم طراحی است که سبک را به React می‌آورد — بر پایهٔ همان مدل رجیستری shadcn/ui. شما یک بسته نصب نمی‌کنید: shadcn CLI منبع هر مؤلفه را در پروژهٔ شما کپی می‌کند و از آن نقطه آن کد شماست.

درون آن چیست:

• اجزا — مجموعهٔ کامل، با یک سبک واحد طراحی‌شده تا حاشیه‌ها، سایه‌ها و قلم با یکدیگر هماهنگ باشند.
• بلوک‌ها — بخش‌های از پیش آماده‌شده: بخش‌های قهرمان، جداول قیمت‌گذاری، صفحات ورود/ثبت‌نام، داشبوردها.
• قالب‌ها — سایت‌های کامل و پنل‌های مدیریت.
• تم‌ها — سازندهٔ تم با پیش‌تنظیم‌های قابل اشتراک‌گذاری.
• Figma کیت — همان سیستم برای طراحان.
• MCP سرور — ویرایشگرهای هوش مصنوعی مانند 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
کپی

سپس برای فونت‌ها و توکن‌های تم به بخش نصب بروید، یا ابتدا اجزا را مرور کنید.