1 مايو 2026

react النيوبروتالية تصميم واجهات درس تعليمي retroui

حوّل أي مشروع React إلى النيوبروتالية في 10 دقائق

هل تريد منح تطبيق React الممل لديك مظهرًا جريئًا جديدًا؟ تعلّم كيف تحوّل أي مشروع React إلى تصميم نيوبروتالي مذهل في 10 دقائق فقط باستخدام Neobrutalism. شرح تفصيلي خطوة بخطوة مع أمثلة قبل وبعد.

Dov Azencot

@DovAzencot

شارك على X

لنكن صريحين: تطبيق React لديك يشبه على الأرجح كل تطبيق React آخر في الساحة. نظيف؟ بالطبع. احترافي؟ قطعًا. لا يُنسى؟ أبعد ما يكون عن ذلك.

لكن ماذا لو أخبرتك أنه في 10 دقائق فقط يمكنك تحويل مشروعك الجنيري إلى شيء ينضح بالشخصية؟ شيء يدفع الناس إلى القول: «واو، ما هذا؟»

هذا هو سحر النيوبروتالية؛ أسلوب تصميم جريء بلا اعتذار، ويستحيل تجاهله. ومع Neobrutalism، تصبح عملية تحويل مشروع React لديك سهلة إلى حدّ مضحك.

خذ قهوتك (أو مشروب طاقة، بلا أحكام)، ولنحوّل ذلك التطبيق الباهت إلى شيء لاذع.

ما هي النيوبروتالية أصلًا

قبل أن نغوص في التفاصيل، لنتّفق على أرضية مشتركة. النيوبروتالية حركة تصميم تستلهم من العمارة البروتالية الخام كثيفة الخرسانة في خمسينيات القرن الماضي، وتمنحها لمسة رقمية عصرية.

تخيّل:

حدود سوداء سميكة على كل شيء
ظلال حادة (لا شيء من هراء الضبابية الناعمة)
ألوان عالية التباين كالأسود والأبيض والأصفر النيوني
صفر زوايا مستديرة (حادة وزاويّة)
تخطيطات غير متماثلة تكسر الشبكة

إنها ضدّ الكمالية. إنها متمرّدة. إنها المعادل التصميمي لارتداء سترة جلدية في اجتماع مجلس الإدارة. وهي تنجح.

لماذا Neobrutalism

يمكنك بناء مكوّنات نيوبروتالية من الصفر، لكن لماذا تعيد اختراع العجلة ما دامت Neobrutalism موجودة؟ إنها مكتبة واجهات React مبنية خصيصًا للنيوبروتالية، وتتميّز بما يلي:

مكوّنات جاهزة بذلك الطابع البروتالي المميّز
تثبيت سهل عبر واجهة سطر الأوامر
قابلة للتخصيص بالكامل مع Tailwind CSS
تعمل مع Next.js وVite وRemix — أي إعداد React عمليًا

كما أنها مجانية ومفتوحة المصدر. لنبدأ.

الخطوة 1: إعداد مشروعك (دقيقتان)

لنبدأ بالأساسيات. إن كنت تعمل على مشروع 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 (دقيقة واحدة)

والآن إلى السحر. علينا تهيئة shadcn (تستخدمه Neobrutalism في الخلفية) وتثبيت أدوات Neobrutalism المساعدة.

شغّل هذا الأمر:


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

ستظهر لك بعض الخيارات. وإليك ما ينبغي أن تختاره:

النمط: Default
اللون الأساسي: Slate (لا يهم كثيرًا، سنتجاوزه لاحقًا)
متغيّرات CSS: 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: إضافة سِمة النيوبروتالية (دقيقتان)

هنا يبدأ التحوّل فعليًا. افتح ملف 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;
}

ماذا حدث للتو؟

ألغينا كل انحناء للحدود (لا مزيد من الزوايا المستديرة)
استبدلنا الظلال الناعمة بظلال حادة ومُزاحة
أنشأنا نظام ألوان جريئًا بالأسود والأبيض والأصفر
أضفنا دعم الوضع الداكن (لأننا لسنا همجيين)

بدأ تطبيقك يبدو مختلفًا بالفعل. لكننا لم ننتهِ بعد.

الخطوة 4: تثبيت مكوّناتك الأولى (دقيقتان)

لنحصل على بعض المكوّنات الحقيقية. سنبدأ بالأساسيات: 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: استبدال مكوّناتك (دقيقتان)

والآن يأتي الجزء الممتع — استبدال مكوّناتك القديمة المملة بالمكوّنات البروتالية الجديدة.

قبل:

// 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: إضافة خطوط النيوبروتالية (دقيقة واحدة)

الطباعة عنصر بالغ الأهمية في النيوبروتالية. لن تفي خطوط النظام الافتراضية بالغرض. توصي 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
الحدود: كل شيء له حدود سوداء سميكة
الظلال: ظلال حادة ومُزاحة بدلًا من الضبابية الناعمة
الزوايا: صفر انحناء للحدود — حادة وزاويّة
الطابع: من «كتيّب شركة» إلى «شركة ناشئة مستقلة ذات شخصية»

هذه بنية المكوّنات ذاتها، والتخطيط ذاته، لكن الإحساس مختلف تمامًا. سيتذكّر الناس هذا.

مثال آخر: عنصر لوحة تحكم

لننظر إلى مثال أكثر تعقيدًا — بطاقة إحصاءات في لوحة تحكم.

قبل: لوحة تحكم باهتة

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. أضف تفاعلات دقيقة

البروتالية لا تعني الجمود. أضف تأثيرات تمرير حيث تتحرّك الأزرار قليلًا أو تكبر الظلال. أبقِها خفيفة لكن ملحوظة.

<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: تثبيت Neobrutalism (دقيقة واحدة)

الخطوة 3: إضافة سِمة النيوبروتالية (دقيقتان)

الخطوة 4: تثبيت مكوّناتك الأولى (دقيقتان)

الخطوة 5: استبدال مكوّناتك (دقيقتان)

الخطوة 6: إضافة خطوط النيوبروتالية (دقيقة واحدة)

الخطوة 7: الضبط الدقيق والتخصيص (اختياري)

قبل وبعد: التحوّل

قبل: تطبيق React جنيري

بعد: مظهر نيوبروتالي جديد

مثال آخر: عنصر لوحة تحكم

قبل: لوحة تحكم باهتة

بعد: لوحة تحكم بروتالية

نصائح احترافية لتصميم النيوبروتالية

ماذا تفعل بعد ذلك

أفكار ختامية

بناء موقع نيوبروتالي من الصفر باستخدام Tailwind CSS v4

أفضل 8 مكتبات للرسوم المتحركة في React لعام 2026

20 لوحة ألوان نيوبروتالية مع أكواد Hex جاهزة للنسخ

حوّل أي مشروع React إلى النيوبروتالية في 10 دقائق

ما هي النيوبروتالية أصلًا

لماذا Neobrutalism

الخطوة 1: إعداد مشروعك (دقيقتان)

الخطوة 2: تثبيت Neobrutalism (دقيقة واحدة)

الخطوة 3: إضافة سِمة النيوبروتالية (دقيقتان)

الخطوة 4: تثبيت مكوّناتك الأولى (دقيقتان)

الخطوة 5: استبدال مكوّناتك (دقيقتان)

الخطوة 6: إضافة خطوط النيوبروتالية (دقيقة واحدة)

الخطوة 7: الضبط الدقيق والتخصيص (اختياري)

قبل وبعد: التحوّل

قبل: تطبيق React جنيري

بعد: مظهر نيوبروتالي جديد

مثال آخر: عنصر لوحة تحكم

قبل: لوحة تحكم باهتة

بعد: لوحة تحكم بروتالية

نصائح احترافية لتصميم النيوبروتالية

ماذا تفعل بعد ذلك

أفكار ختامية

مقالات ذات صلة

بناء موقع نيوبروتالي من الصفر باستخدام Tailwind CSS v4

أفضل 8 مكتبات للرسوم المتحركة في React لعام 2026

20 لوحة ألوان نيوبروتالية مع أكواد Hex جاهزة للنسخ