Introduction

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

नियोब्रूटलिज़्म एक वेब डिज़ाइन शैली है जो 2010 के दशक के अंत में फ्लैट, न्यूनतम डिज़ाइन की एकरूपता के प्रति प्रतिक्रिया के रूप में उभरी। यह ब्रूटलिस्ट वास्तुकला की कच्चीपन—ईमानदार सामग्री, दृश्यमान संरचना—को बोल्ड रंगों और चंचल ज्यामिति के साथ स्क्रीन पर उतारती है।

आप इसे पाँच गुणों से पहचान सकते हैं:

• मोटी सीमाएँ — प्रत्येक तत्व को, आमतौर पर ठोस काले रंग में, रेखांकित किया गया है।
• हार्ड शैडोज़ — बिना ब्लर के फ्लैट ऑफ़सेट्स, जिससे तत्व पृष्ठ पर भौतिक रूप से एक-दूसरे के ऊपर रखे हुए दिखते हैं।
• चमकीला रंग — उच्च-कंट्रास्ट, संतृप्त भराव। कोई ग्रेडिएंट नहीं, कोई ग्लासमॉर्फिज्म नहीं।
• चौकोर कोने और मोटा अक्षर — एक ऐसी ज्यामिति जो जगह घेरती है, माफी मांगने के बजाय।
• स्पर्श संबंधी इंटरैक्शन — बटन पर क्लिक करने पर वे अपनी छायाओं में दृश्य रूप से धँस जाते हैं।

कुछ भी तैरता नहीं है, कुछ भी धुंधला नहीं होता, कुछ भी छिपता नहीं है।Gumroad के 2021 के रीडिज़ाइन ने इस शैली को मुख्यधारा में ला दिया; आज यह उन उत्पादों के लिए एक पसंदीदा विकल्प है जो डिफ़ॉल्ट दिखने के बजाय सोचा-समझा दिखना चाहते हैं।

Neobrutalism.com क्या है?#

Neobrutalism.com यह एक डिज़ाइन सिस्टम है जो React में स्टाइल लाता है — यह shadcn/ui के समान रजिस्ट्री मॉडल पर बनाया गया है। आप कोई पैकेज इंस्टॉल नहीं करते: shadcn CLI प्रत्येक घटक का स्रोत आपके प्रोजेक्ट में कॉपी कर देता है, और उस बिंदु से वह आपका कोड बन जाता है।

अंदर क्या है:

• घटक — पूरी सेट, एक ही शैली-निर्देश के अनुसार तैयार किए गए ताकि बॉर्डर, छायाएँ और फ़ॉन्ट एक-दूसरे से मेल खाते हों।
• ब्लॉक्स — तैयार-निर्मित अनुभाग: हीरोज़, प्राइसिंग टेबल, ऑथ स्क्रीन, डैशबोर्ड।
• टेम्प्लेट्स — पूर्ण साइटें और एडमिन पैनल।
• थीम्स — साझा करने योग्य प्रीसेट्स वाला एक थीम बिल्डर।
• Figma किट — डिजाइनरों के लिए वही सिस्टम।
• MCP सर्वर — AI संपादक जैसे 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
कॉपी करें

फिर फ़ॉन्ट्स और थीम टोकन के लिए इंस्टॉलेशन पर जाएँ, या पहले घटकों को ब्राउज़ करें।