1 می 2026

react نئوبروتالیسم طراحی UI آموزش retroui

چطور هر پروژهٔ React را در 10 دقیقه به نئوبروتالیسم تبدیل کنیم

می‌خواهید به اپلیکیشن React کسل‌کننده‌تان یک تغییر چهرهٔ جسورانه بدهید؟ یاد بگیرید چطور هر پروژهٔ React را تنها در 10 دقیقه با Neobrutalism به یک طراحی نئوبروتالیستی خیره‌کننده تبدیل کنید. آموزش گام‌به‌گام با نمونه‌های قبل/بعد.

Dov Azencot

@DovAzencot

هم‌رسانی در X

رک بگوییم: اپلیکیشن React شما احتمالاً شبیه هر اپلیکیشن React دیگری است. تمیز؟ البته. حرفه‌ای؟ کاملاً. به‌یادماندنی؟ حتی نزدیکش هم نه.

اما اگر بگویم تنها در 10 دقیقه می‌توانید پروژهٔ به‌ظاهر معمولی‌تان را به چیزی تبدیل کنید که فریاد شخصیت می‌زند چه؟ چیزی که مردم را وامی‌دارد بگویند: «وای، این دیگر چیست؟»

این قدرت نئوبروتالیسم است — سبکی از طراحی که جسور، بی‌پروا و غیرقابل‌چشم‌پوشی است. و با Neobrutalism، تبدیل پروژهٔ React شما به‌طرز مسخره‌ای آسان است.

قهوه‌تان را بردارید (یا نوشیدنی انرژی‌زا، بدون قضاوت) و بیایید آن اپلیکیشن بی‌مزه را به چیزی با کمی تندی تبدیل کنیم.

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

پیش از شیرجه‌زدن، سر یک صفحه بیاییم. نئوبروتالیسم یک جنبش طراحی است که از معماری بروتالیستِ خام و پربتنِ دههٔ 1950 الهام می‌گیرد و به آن چرخشی مدرن و دیجیتال می‌دهد.

تصور کنید:

کادرهای مشکی ضخیم روی همه‌چیز
سایه‌های سخت (بدون آن مزخرفاتِ بلورِ نرم)
رنگ‌های پرکنتراست مثل مشکی، سفید و زرد نئون
صفرْ گوشهٔ گِرد (همه‌چیز تیز و گوشه‌دار)
چیدمان‌های نامتقارن که گرید را می‌شکنند

این ضدکمال‌گرایی است. این سرکش است. این معادل طراحیِ پوشیدن یک کاپشن چرمی به یک جلسهٔ هیئت‌مدیره است. و جواب می‌دهد.

چرا 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 سری بزنید. اینپوت‌ها، بج‌ها، دیالوگ‌ها، جدول‌ها و بیشتر هست — همه با آن زیبایی‌شناسی بروتال.

قبل و بعد: دگرگونی

خب، بیایید تفاوت را ببینیم. اینجا یک لندینگ‌پیج ساده قبل و بعد از تبدیل نئوبروتالیستی چطور به نظر می‌رسد.

قبل: یک اپ 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 یک کتابخانهٔ کامل از مؤلفه‌ها دارد — بج‌ها، دیالوگ‌ها، جدول‌ها، تب‌ها و بیشتر. به مستندات مؤلفه‌ها سری بزنید و ببینید چه چیز دیگری می‌توانید اضافه کنید.

تم خود را سفارشی کنید

با متغیرهای CSS بازی کنید تا با برندتان جور شوند. رنگ‌های لهجه را عوض کنید، شدت سایه‌ها را تنظیم کنید یا فاصله‌ها را دستکاری کنید تا آن را از آنِ خود کنید.

چیزی باحال بسازید

حالا که اپلیکیشن‌تان معمولی به نظر نمی‌رسد، آن را به نمایش بگذارید. در Twitter به اشتراک بگذارید، در 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 (آماده برای کپی و پیست)