सामग्री पर जाएँ
1.6k

1 मई 2026

reactनियोब्रूटलिज़्मUI डिज़ाइनट्यूटोरियलretroui

किसी भी React प्रोजेक्ट को 10 मिनट में नियोब्रूटलिज़्म में कैसे बदलें

अपनी उबाऊ React ऐप को एक बोल्ड नया रूप देना चाहते हैं? जानिए Neobrutalism का इस्तेमाल करके किसी भी React प्रोजेक्ट को सिर्फ़ 10 मिनट में एक शानदार नियोब्रूटलिस्ट डिज़ाइन में कैसे बदलें। पहले/बाद के उदाहरणों के साथ स्टेप-बाय-स्टेप ट्यूटोरियल।

DA

Dov Azencot

@DovAzencot
X पर शेयर करें

सच बात करें: आपकी React ऐप शायद बाकी सभी React ऐप जैसी दिखती है। साफ़-सुथरी? हाँ। पेशेवर? बिल्कुल। यादगार? दूर-दूर तक नहीं।


पर अगर मैं कहूँ कि सिर्फ़ 10 मिनट में आप अपने आम दिखने वाले प्रोजेक्ट को कुछ ऐसा बना सकते हैं जो व्यक्तित्व से भरा हो? कुछ ऐसा जो लोगों से कहलवा दे, "अरे वाह, यह क्या है?"


यही है नियोब्रूटलिज़्म की ताकत — एक डिज़ाइन स्टाइल जो बोल्ड, बेधड़क और नज़रअंदाज़ करना नामुमकिन है। और Neobrutalism के साथ, अपने React प्रोजेक्ट को बदलना बेहद आसान है।


अपनी कॉफ़ी (या एनर्जी ड्रिंक, कोई राय नहीं) उठाइए, और उस फीकी ऐप को कुछ चटपटा बना देते हैं।


आख़िर यह नियोब्रूटलिज़्म है क्या?

शुरू करने से पहले, एक ही समझ पर आ जाते हैं। नियोब्रूटलिज़्म एक डिज़ाइन आंदोलन है जो 1950 के दशक की रॉ, कंक्रीट से भरी ब्रूटलिस्ट वास्तुकला से प्रेरणा लेता है और उसे एक आधुनिक, डिजिटल मोड़ देता है।


सोचिए:

  • हर चीज़ पर मोटी काली बॉर्डर
  • हार्ड शैडो (सॉफ़्ट ब्लर वाली कोई बेतुकी बात नहीं)
  • हाई कॉन्ट्रास्ट कलर जैसे काला, सफ़ेद और नियॉन पीला
  • शून्य गोल कोने (तीखे और कोणीय, बॉस)
  • असममित लेआउट जो ग्रिड तोड़ते हैं

यह एंटी-परफ़ेक्शनिज़्म है। यह बागी है। यह डिज़ाइन में बोर्ड मीटिंग में चमड़े की जैकेट पहनकर जाने जैसा है। और यह काम करता है।


Neobrutalism क्यों?

आप नियोब्रूटलिस्ट कॉम्पोनेंट शुरू से बना सकते हैं, पर जब Neobrutalism मौजूद है तो पहिया दोबारा क्यों ईजाद करें? यह खास तौर पर नियोब्रूटलिज़्म के लिए बनी एक React UI लाइब्रेरी है, जिसमें है:

  • उस पहचानी ब्रूटल सौंदर्यबोध के साथ पहले से बने कॉम्पोनेंट
  • 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 utils इंस्टॉल करें:

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 इसे आसान बना देता है।


अलग एक्सेंट कलर चाहिए? अपने CSS में --primary वेरिएबल बदलें।

: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 ऐप" से "रुको, यह क्या है?" तक पहुँच गए। और सच कहूँ? यह ताकतवर है।


तो आगे बढ़िए — अपनी ऐप को नज़रअंदाज़ करना नामुमकिन बना दीजिए।


अब बाहर निकलिए और कुछ ब्रूटल बनाइए। 🚀

मिलते-जुलते लेख

← ब्लॉग पर वापस