नियोब्रूटलिस्टReact UI घटक
ओपन-सोर्स React UI कंपोनेंट्स, नियोब्रूटलिस्ट लुक के साथ — मोटे बॉर्डर, सख़्त शैडो और चटख रंग। shadcn CLI से इंस्टॉल करें, या हमारे MCP सर्वर के ज़रिए अपने AI एजेंट से जोड़ें। Radix UI, Base UI और React Aria के साथ चलते हैं। कोड आपके रेपो में आता है और आपका ही रहता है।
Shell command: npx shadcn add neobrutalism.com/r/base/button.json- 50+ घटक
- मोटे किनारे, कठोर परछाँव
- shadcn CLI स्थापित करें
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- डिफ़ॉल्ट रूप से सुलभ
- कोड आपका है
- MCP सर्वर समर्थन
- डार्क मोड और ईमेल
- चिल्लाने वाले छोटे लेबल
सभी कंपोनेंट्स
OTP इनपुट
2FA, साइन-इन सत्यापन और PIN स्क्रीन के लिए एक-बार कोड प्रविष्टि — नियोब्रुटलिस्ट शैली की सीमाओं और कठोर छायाओं के साथ पेस्ट-जागरूक स्लॉट्स।
Sonner
सेव पुष्टि, अपलोड और अनडू विंडो के लिए स्टैक्ड टोस्ट सूचनाएं — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।
अकॉर्डियन
FAQs, सेटिंग्स और सामग्री-भारी पृष्ठों के लिए ऊर्ध्वाधर रूप से स्टैक किए गए विस्तार योग्य अनुभागों का एक सेट — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।
अलर्ट
फ़ॉर्म त्रुटियों, चेतावनियों और सफलता पुष्टि के लिए इनलाइन कॉलआउट — नियोब्रुटलिस्ट बॉर्डर और कठोर छायाओं वाले स्थिति-रंगित पैनल।
अलर्ट डायलॉग
विनाशकारी क्रियाओं — हटाना, साइन आउट, त्यागना — के लिए प्रवाह को रोकने वाला एक मोडल, जिसमें नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट है।
अवतार
प्रोफ़ाइल मेनू, टिप्पणी थ्रेड्स और टीम सूचियों के लिए आरंभिक अक्षरों वाले बैकअप के साथ एक उपयोगकर्ता चित्र — निओब्रुटलिस्ट मोटी-सीमा वाली शैली में।
आइटम
मीडिया, शीर्षक, विवरण और क्रिया स्लॉट्स के साथ एक फ्लेक्स रो, जो सूचना फ़ीड, सेटिंग्स सूचियों और फ़ाइल रो के लिए है — नियोब्रुटलिस्ट शैली में।
आकार बदलने योग्य
कोड संपादकों, फ़ाइल ट्री और डैशबोर्ड लेआउट के लिए खींचने योग्य विभाजित पैन — नियोब्रूटलिस्ट शैली के बॉर्डर और शैडो ट्रीटमेंट के साथ।
आस्पेक्ट रेशियो
छवियों, वीडियो एम्बेड्स और मानचित्रों को स्केल होने पर एक निश्चित अनुपात में सीमित करता है — वह लेआउट यूटिलिटी जो नियोब्रुटलिस्ट कार्ड्स को ग्रिड पर बनाए रखती है।
इनपुट
लॉगिन, सर्च बार और चेकआउट फॉर्म के लिए एक-पंक्ति टेक्स्ट फ़ील्ड — नियोब्रूटलिस्ट मोटे बॉर्डर और कठोर छाया प्रभाव के साथ।
इनपुट समूह
खोज बार, URL फ़ील्ड और चैट कंपोज़र के इनपुट्स के लिए आइकन, बटन और kbd संकेत संलग्न करें — नियोब्रूटलिस्ट बॉर्डर और शैडोज़ के साथ।
कमांड
⌘K मेन्यू, ग्लोबल सर्च, और क्विक एक्शन्स के लिए कीबोर्ड-चालित कमांड पैलेट — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।
कार्ड
डैशबोर्ड, मूल्य निर्धारण स्तरों और उत्पाद ग्रिड के लिए एक बॉर्डरयुक्त बॉक्स — हेडर, कंटेंट और फुटर में नियोब्रूटलिस्ट हार्ड-शैडो ट्रीटमेंट के साथ।
कीबोर्ड
मेनू, टूलटिप्स और कमांड पैलेट्स में शॉर्टकट संकेतों के लिए कीबोर्ड-की कैप्स — नियोब्रुटलिस्ट बॉर्डर्स और शैडोज़ के साथ एक नेटिव kbd एलिमेंट।
कैरसेल
उत्पाद गैलरियों, प्रशंसापत्रों और हीरो सेक्शन के लिए स्वाइप करने योग्य स्लाइडशो — नियोब्रूटलिस्ट बॉर्डर और कठोर छायाओं में सजी हुई।
कैलेंडर
बुकिंग, शेड्यूलिंग और रेंज चयन के लिए एक मासिक ग्रिड दिनांक चयनकर्ता — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।
कॉम्बोबॉक्स
एक ऑटो-कम्प्लीट इनपुट जो टाइप करते समय विकल्पों को फ़िल्टर करता है — देश चयनकर्ता, टैग इनपुट, लंबी चयन सूचियाँ — नियोब्रूटलिस्ट शैली की सीमाओं और छायाओं के साथ।
चेकबॉक्स
सहमति बॉक्सों, बहु-चयन फ़िल्टरों, और थोक पंक्ति चयन के लिए एक बाइनरी टॉगल — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।
टाइपोग्राफी
शीर्षक, मुख्य पाठ, सूचियाँ, तालिकाएँ और इनलाइन कोड के लिए यूटिलिटी-क्लास रेसिपी — नियोब्रूटलिस्ट हेवी-वेट लुक में टाइपसेट।
टूलटिप
आइकन बटनों, कीबोर्ड शॉर्टकट्स और संक्षिप्त लेबलों के लिए होवर और फोकस संकेत — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।
टेक्स्टएरिया
टिप्पणियों, जीवनी और सहायता संदेशों के लिए बहु-पंक्तियों वाला टेक्स्ट इनपुट — नियोब्रुटलिस्ट शैली के बॉर्डर और शैडोज़ ट्रीटमेंट के साथ।
टैब
लेयर्ड कंटेंट पैनलों — सेटिंग्स पेज, डैशबोर्ड और कोड प्रीव्यू — के बीच स्विच करें, जिसमें नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट हो।
टॉगल
टूलबार स्वरूपण, म्यूट और पिन नियंत्रणों के लिए दो-स्थिति वाला ऑन/ऑफ बटन — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।
टॉगल समूह
संपादक टूलबार, दृश्य स्विचर और फ़िल्टर बार के लिए द्वि-स्थिति बटन समूह — नियोब्रूटलिस्ट शैली के बॉर्डर और शैडोज़ के साथ।
डायलॉग
पुष्टिकरण, त्वरित फ़ॉर्म और विनाशकारी क्रिया संकेतों के लिए एक मोडल विंडो — मोटी सीमाओं और गहरे साये के साथ पृष्ठ पर परतबद्ध।
डेटा तालिका
प्रशासक पैनलों, डैशबोर्ड्स और ऑर्डर सूचियों के लिए क्रमबद्ध, फ़िल्टर करने योग्य, पृष्ठबद्ध तालिकाएँ — नियोब्रूटलिस्ट शैली के बॉर्डर और शैडोज़ ट्रीटमेंट के साथ।
ड्रॉअर
मोबाइल मेनू, फ़िल्टर और त्वरित फ़ॉर्म के लिए किसी भी किनारे से स्लाइड-इन होने वाली एक इशारा-संचालित शीट — नव-ब्रूटलिस्ट शैली की सीमाओं और छायाओं के साथ।
ड्रॉपडाउन मेनू
पंक्ति क्रियाओं, खाता स्विचर्स और दृश्य विकल्पों के लिए बटन-संचालित मेनू — नियोब्रूटलिस्ट शैली के बॉर्डर और शैडोज़ ट्रीटमेंट के साथ।
तालिका
चालान, प्रशासक सूचियाँ और मूल्य निर्धारण ग्रिड के लिए एक सेमांटिक HTML तालिका — बॉर्डर वाली पंक्तियाँ, बोल्ड हेडर और एक कठोर नियोब्रुटलिस्ट छाया।
दिनांक पिकर
फ़ॉर्म और फ़िल्टर में एकल तिथियाँ, तिथि-सीमाएँ और जन्मदिन चुनने के लिए एक पॉपओवर कैलेंडर — नियोब्रूटलिस्ट बॉर्डर और कठोर छायाओं के साथ।
दिशा
एक संदर्भ प्रदाता जो घटकों को LTR (दाएं से बाएं) और RTL (बाएं से दाएं) के बीच स्वचालित रूप से बदलता है, ताकि मेनू, स्लाइडर और टैब अरबी, हिब्रू और फ़ारसी में सही ढंग से प्रतिबिंबित हों।
नेटिव सेलेक्ट
फॉर्म, फ़िल्टर और देश चयनकर्ताओं के लिए मूल HTML चयन को नया रूप दिया गया — OS-रेंडर किए गए ड्रॉपडाउन के साथ नियोब्रूटलिस्ट बॉर्डर और शैडोज़।
नेविगेशन मेनू
साइट हेडर, दस्तावेज़ नेविगेशन और ऐप शेल के लिए लिंक और ड्रॉपडाउन पैनलों की एक क्षैतिज पट्टी — नियोब्रूटलिस्ट बॉर्डर और कठोर छायाओं के साथ।
पेजिनेशन
खोज परिणामों, तालिकाओं और अभिलेखागारों के लिए संख्यांकित पृष्ठ लिंक, पिछले/अगले नियंत्रणों के साथ — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ शैली में।
पॉपओवर
डेटा पिकर्स, फ़िल्टर्स, और इनलाइन फ़ॉर्म्स के लिए ट्रिगर से एंकर किया गया एक फ़्लोटिंग पैनल — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।
प्रगति
एक पतला बार जो किसी कार्य के पूरा होने पर भरता है — अपलोड, इंस्टॉल, बहु-चरणीय ऑनबोर्डिंग — जिसमें नियोब्रूटलिस्ट शैली का बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट होता है।
फ़ील्ड
सेटिंग्स पैनलों, चेकआउट फ़ॉर्मों और साइनअप फ़्लो के लिए लेबल, नियंत्रण, सहायता पाठ और त्रुटि स्लॉट — नियोब्रूटलिस्ट फ़ॉर्म ट्रीटमेंट के साथ।
बटन
फ़ॉर्म सबमिट, टूलबार और विनाशकारी पुष्टि के लिए एक क्लिक करने योग्य ट्रिगर — मोटे बॉर्डर और एक छाया के साथ, जिस पर क्लिक करने पर यह दबाव डालता है।
बटन समूह
फ्यूज़ स्प्लिट बटन, टूलबार और इनपुट ऐड-ऑन को एक फ्रेमयुक्त इकाई में जोड़ता है — एक मोटी सीमा, एक कठोर छाया, एक साझा दबाव।
बैज
कार्ड, तालिकाओं और नेविगेशन आइटम्स पर स्थितियों, गिनतियों और टैग्स के लिए एक छोटा लेबल — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।
ब्रेडक्रंब
यह दिखाता है कि पेज साइट पदानुक्रम में कहाँ स्थित है — दस्तावेज़ों, स्टोर श्रेणियों और डैशबोर्ड्स के लिंक ट्रेल्स — बोल्ड नियोब्रूटलिस्ट प्रकार में।
मेनूबार
ऐप-स्टाइल टूलबार, संपादक और डैशबोर्ड के लिए ड्रॉपडाउन मेनू की एक क्षैतिज पट्टी — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।
रिक्त
कोई परिणाम न मिलने वाली खोजों, खाली डैशबोर्डों और पहली बार चलने वाली स्क्रीन के लिए एक प्लेसहोल्डर — आइकन, शीर्षक और क्रिया नियोब्रुटलिस्ट बॉर्डर में फ्रेम की गई।
रेडियो समूह
योजनाओं, शिपिंग विकल्पों और सेटिंग्स फ़ॉर्म के लिए एकल-चयन रेडियो बटन का सेट — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।
लेबल
इनपुट्स, चेकबॉक्स, स्विच और रेडियो समूहों के लिए कैप्शन — क्लिक करने पर नियंत्रण सक्रिय होता है, जिसे नियोब्रूटलिस्ट हेडिंग फ़ॉन्ट में सेट किया गया है।
विभाजक
एक क्षैतिज या ऊर्ध्वाधर रेखा जो मेनू, टूलबार और सूचियों को विभाजित करती है — जिसे नेओब्रुटलिस्ट फ्रेमों के समान ठोस बॉर्डर रंग में खींचा गया है।
शीट
स्क्रीन के किनारे से स्लाइड-इन होने वाला एक पैनल, जो नेविगेशन ड्रॉअर, फ़िल्टर और संपादन फ़ॉर्म के लिए है — जिसमें नियोब्रूटलिस्ट शैली का बॉर्डर-और-छाया प्रभाव है।
संक्षारण योग्य
फ़ाइल ट्री, उन्नत सेटिंग्स और 'और देखें' अनुभागों के लिए एक ट्रिगर-और-पैनल जोड़ी — नियोब्रूटलिस्ट बॉर्डर्स-और-शैडोज़ ट्रीटमेंट के साथ।
संदर्भ मेनू
फ़ाइल पंक्तियों, कैनवस और डेटा ग्रिड्स के लिए राइट-क्लिक मेनू — संदर्भगत क्रियाएँ, नियोब्रूटलिस्ट शैली के बॉर्डर-और-छाया प्रभाव के साथ।
साइडबार
डैशबोर्ड, दस्तावेज़ और एडमिन टूल्स के लिए एक तह हो सकने वाला ऐप-शेल नेविगेशन पैनल — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।
सेलेक्ट
एक ड्रॉपडाउन जो एक विकल्प चुनने के लिए होता है — देश के फ़ील्ड, क्रमबद्ध करने के क्रम, थीम सेटिंग्स — मोटी नियोब्रूटलिस्ट सीमाओं और कठोर छायाओं के साथ।
स्केलेटन
डेटा लोड होने के दौरान कार्ड, अवतार और तालिकाओं के लिए एक धड़कता हुआ प्लेसहोल्डर ब्लॉक — नियोब्रूटलिस्ट मोटी-सीमा उपचार के साथ।
स्क्रॉल क्षेत्र
चैट पैन, साइडबार और फ़ाइल ट्री के लिए कस्टम, क्रॉस-ब्राउज़र स्क्रॉलबार वाला एक स्क्रॉल करने योग्य कंटेनर — एक मोटे नियोब्रूटलिस्ट थंब के साथ।
स्पिनर
लंबित सबमिट, फ़ेच और इनलाइन व्यस्त अवस्थाओं के लिए एक एनिमेटेड लोडिंग संकेतक — किसी भी नियोब्रुटलिस्ट नियंत्रण के लिए एक ड्रॉप-इन आइकन।
स्लाइडर
मूल्य या सीमा चुनने के लिए एक ड्रैग करने योग्य इनपुट — वॉल्यूम, मूल्य फ़िल्टर, सेटिंग्स — जिसमें नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट है।
स्विच
तत्काल सेटिंग्स — सूचनाएं, डार्क मोड, फीचर फ्लैग्स — के लिए ऑन/ऑफ टॉगल, जिसमें नियोब्रूटलिस्ट शैली का बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट है।
होवर कार्ड
होवर करने पर खुलने वाला एक फ्लोटिंग पूर्वावलोकन — प्रोफ़ाइल झलकियाँ, लिंक पूर्वावलोकन, शब्दावली शब्द — नियोब्रूटलिस्ट बॉर्डर्स-और-शैडोज़ ट्रीटमेंट के साथ।
पसंद डेवलपर्स, डिज़ाइनर्स
और क्रिएटर्स की
आपकी UI किट मिल गई और तुरंत ले ली। नई है, एक्टिवली मेंटेन होती है और लगातार बेहतर हो रही है — कमाल का काम! 🤘
Ziv Reich, सॉफ़्टवेयर डेवलपर बस इतना कहना था कि neobrutalism.com पर बढ़िया काम किया. सच में बहुत पसंद है. डिज़ाइन मुझसे होता नहीं, तो यह मेरे लिए कमाल की चीज़ रही. अपनी पर्सनल साइट पर इस्तेमाल किया.
Paul Bratslavsky, Coding With Paul के क्रिएटर आख़िरकार Neobrutalism.com से अपनी पर्सनल वेबसाइट फिर से बनाई — मज़ेदार लाइब्रेरी, शुरू करना बहुत आसान!
Cameron Blackwood, कंटेंट क्रिएटर Neobrutalism.com रेट्रो स्टाइल की मेरी पसंदीदा UI कंपोनेंट लाइब्रेरी में से एक है — कंपोनेंट जो सच में ship होते हैं।
Zhengyang Hou, इंडी हैकर वेब के लिए मेरी पसंदीदा ui लाइब्रेरी में से एक. बढ़िया काम — उम्मीद है यह और भी आगे जाएगी.
Taseen Tanvir, फ़ाउंडर और डिज़ाइनर Neobrutalism.com Pro आज़माया — बाक़ी से अलग UI किट, सच में ताज़गी भरी। नियोब्रूटलिज़्म ब्लॉक्स 🔥 से अजीब लेआउट का प्रोटोटाइप कहीं तेज़ हो गया।
Nitesh Padghan, घोस्टराइटर ब्यूटीफ़ुल लैंडिंग पेज डिज़ाइन, परफ़ेक्ट बैलेंस और फ्लो के साथ। कलर पैलेट और एनिमेशन मिलकर एक्सेप्शनल यूज़र एक्सपीरियंस बनाते हैं।
Alan Obeng-Peprah, Senior Designer @ NativeXAI उन्होंने जो डिज़ाइन डिलीवर किया, उससे मैं सच में इंप्रेस्ड हूँ। फ़ाइनल प्रॉडक्ट बिल्कुल वैसा ही था जैसा मैंने सोचा था।
Desmond, Co-founder @ VectorlabsVentures एजेंसी ओनर के तौर पर मैं क्लाइंट लैंडिंग लेआउट पर हफ़्ते लगा देता हूँ। Neobrutalism.com के साथ मैं टेम्प्लेट लगाता हूँ, कॉपी ट्वीक करता हूँ, और शिप के लिए तैयार।
Duke Opoku Amankwah, Founder @ Midas टेम्प्लेट सिर्फ़ विज़ुअली स्टनिंग नहीं — स्ट्रक्चर भी बहुत अच्छा है। हफ़्तों का डेवलपमेंट टाइम बचाया।
Abiola Braimah, Developer @ Studio IX आउटस्टैंडिंग क्वालिटी और डिटेल पर ध्यान। रिस्पॉन्सिव डिज़ाइन हर डिवाइस पर फ्लॉलेस काम करता है।
Acromond X., Co-founder @ VectorlabsVentures इन टेम्प्लेट को हमारे वर्कफ़्लो में जोड़ने से डेवलपमेंट साइकिल काफी कम हो गई। शानदार काम।
Raquib S., Backend Developer ये टेम्प्लेट हमारा गो-टू रिसोर्स बन गए हैं। कोड क्लीन है, अच्छी तरह डॉक्यूमेंटेड, और आसानी से कस्टमाइज़ हो जाता है।
Hallic M., Developer @ AtlasLabs Neobrutalism.com टेम्प्लेट एस्थेटिक्स और फ़ंक्शनैलिटी का परफ़ेक्ट बैलेंस रखते हैं। हमारे प्रोजेक्ट्स के लिए असली गेम-चेंजर।
Ibrahim S., Frontend Lead @ ScaleUp आउटस्टैंडिंग सपोर्ट और प्रीमियम क्वालिटी टेम्प्लेट। इन टेम्प्लेट पर ROI फ़ीनॉमिनल है।
Kevin K., CEO @ WebCraft Neobrutalism.com टेम्प्लेट ने नए क्लाइंट प्रोजेक्ट्स के अप्रोच को पूरी तरह बदल दिया। कोड क्वालिटी एक्सेप्शनल है और डिज़ाइन सच में वर्ल्ड-क्लास।
Danny G., Founder of DevStack मैंने कई टेम्प्लेट लाइब्रेरी इस्तेमाल की हैं, लेकिन Neobrutalism.com परफ़ॉर्मेंस ऑप्टिमाइज़ेशन और क्लीन कोड आर्किटेक्चर की वजह से अलग है।
Ian D., CTO at Wavelength इन टेम्प्लेट में एनिमेशन और माइक्रो-इंटरैक्शन बिल्कुल शानदार हैं। डिज़ाइन टीम के लिए बेस्ट इन्वेस्टमेंट।
Ben S., Lead Designer at PixelPerfect नॉन-टेक्निकल फ़ाउंडर के तौर पर Neobrutalism.com टेम्प्लेट ने डिज़ाइन क्वालिटी से समझौता किए बिना रिकॉर्ड समय में MVP लॉन्च करने में मदद की। हमारे इन्वेस्टर्स हैरान रह गए।
Matthew I., Startup Founder मुझे पसंद है कि ये कंपोनेंट कितने मॉड्यूलर और अच्छी तरह डॉक्यूमेंटेड हैं। अलग-अलग टेम्प्लेट के टुकड़े आसानी से मिला पाए।
Garrett P., Frontend Lead at TechFusion Neobrutalism.com टेम्प्लेट पर ROI अविश्वसनीय है। डेवलपमेंट टाइम बहुत कम हो गया और क्लाइंट्स को बेहतर क्वालिटी साइट्स मिल रही हैं।
Xavier C., Agency Owner
घटक
गैलरी FAQ
यह मुफ्त प्रिमिटिव्स का ग्रिड — प्रत्येक डॉक्स पेज पर बैकएंड्स, CLI इंस्टॉलेशन, और गैलरी कैसे /docs /components से मेल खाती है।