Installation

एक ही shadcn CLI कमांड से नियोब्रूटलिस्ट React कंपोनेंट्स इंस्टॉल करें — कोई पैकेज नहीं, कोई कॉन्फ़िग नहीं। साथ में सिग्नेचर लुक के पीछे के फ़ॉन्ट्स और Tailwind v4 टोकन।

Neobrutalism.com shadcnCLI के लिए एक रजिस्ट्री है। इंस्टॉल करने के लिए कोई पैकेज नहीं है और न ही कोई प्रोवाइडर है जिसमें आप अपनी ऐप लपेट सकें — CLI प्रत्येक कंपोनेंट का सोर्स कोड neobrutalism.com से आपके प्रोजेक्ट में कॉपी करता है, और उस बिंदु से वह आपका कोड बन जाता है।

सेटअप तीन चरणों में होता है, लगभग पाँच मिनट लगते हैं:

एक घटक स्थापित करें — एक कमांड, शून्य कॉन्फ़िग।
फ़ॉन्ट्स जोड़ें — शीर्षकों के लिए Archivo Black, मुख्य पाठ के लिए Space Grotesk।
थीम टोकन जोड़ें — वे बॉर्डर, शैडोज़ और पैलेट जो इसे नियोब्रूटलिज़्म बनाते हैं।

एक घटक स्थापित करें

प्रत्येक घटक दो संस्करणों में आता है, Base UI और Radix UI। इंस्टॉल URL यह तय करता है कि आपको कौन सा मिलता है:


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


pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

यही पूरी इंस्टॉलेशन कहानी है। button को किसी भी घटक से बदलें — पैटर्न हमेशा https://neobrutalism.com/r/<base|radix>/<component>.json होता है, और प्रत्येक घटक पृष्ठ दोनों वेरिएंट के लिए सटीक कमांड दिखाता है।

फ़ॉन्ट्स जोड़ें

शीर्षक Archivo Black में सेट किए गए हैं, मुख्य पाठ Space Grotesk में। Next.js के साथ, इन्हें next/font/google से लोड करें:

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"],
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

थीम जोड़ें

इन टोकन को अपने globals.css में डालें। हार्ड ऑफ़सेट शैडोज़ और --radius: 0 अधिकांश काम कर रहे हैं — बाकी सब पैलेट है, और यह सब साधारण Tailwind v4 थीमिंग है जिसे आप बाद में बदल सकते हैं:

globals.css

@import "tailwindcss";
 
@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --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-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0;
  --background: #fff7e8;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #efe7d6;
  --muted-foreground: #6b6355;
  --accent: #ffe7a3;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --input: #fff;
  --ring: #000;
}
 
.dark {
  --background: #1a1815;
  --foreground: #f5f0e6;
  --card: #262320;
  --card-foreground: #f5f0e6;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #3a352f;
  --secondary-foreground: #f5f0e6;
  --muted: #2e2a24;
  --muted-foreground: #b3ac9e;
  --accent: #38342b;
  --accent-foreground: #f5f0e6;
  --destructive: #ff6b6b;
  --destructive-foreground: #1a1815;
  --border: #000;
  --input: #262320;
  --ring: #ffdc58;
}

नया प्रोजेक्ट शुरू कर रहे हैं?

फ़्रेमवर्क गाइड पहली कमांड से लेकर सब कुछ विस्तार से समझाता है:

Next.js — create-next-app, init, fonts, theme, पहला कम्पोनेंट।
वाइट — टेलविंड, पथ उपनाम, इनिट, पहला घटक।

इंस्टॉल करने से पहले पूर्वावलोकन करें

टर्मिनल से किसी भी घटक का स्रोत निरीक्षण करें:


pnpm dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
npx shadcn@latest view https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest view https://neobrutalism.com/r/base/button.json

रजिस्ट्री नामस्थान (वैकल्पिक)

पूर्ण URL ही आपके लिए पर्याप्त हैं। लेकिन यदि आप MCP सर्वर सेटअप कर रहे हैं — जो नामित रजिस्ट्रीज़ के माध्यम से घटकों को हल करता है — या आप CLI के search और list कमांड चाहते हैं, तो अपने components.json में रजिस्ट्री को उपनाम दें:

components.json

{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

अलीस स्थापित होने के बाद, CLI पूरी रजिस्ट्री का अन्वेषण कर सकता है:


pnpm dlx shadcn@latest search @neobrutalism
npx shadcn@latest search @neobrutalism
yarn dlx shadcn@latest search @neobrutalism
bunx --bun shadcn@latest search @neobrutalism


pnpm dlx shadcn@latest list @neobrutalism
npx shadcn@latest list @neobrutalism
yarn dlx shadcn@latest list @neobrutalism
bunx --bun shadcn@latest list @neobrutalism

एकल भंडार

CLI को -c / --cwd के साथ सही वर्कस्पेस पर इंगित करें:


pnpm dlx shadcn@latest init -c ./apps/web
npx shadcn@latest init -c ./apps/web
yarn dlx shadcn@latest init -c ./apps/web
bunx --bun shadcn@latest init -c ./apps/web


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
npx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web

मदद चाहिए?

किसी चीज़ में अटके हो? डिस्कॉर्ड सक्रिय है — आकर नमस्ते कहो।

→ डिस्कॉर्ड समुदाय