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

नियोब्रूटलिस्टReact UI घटक

नियोब्रूटलिज़्म स्टाइल में एक्सेसिबल React कंपोनेंट्स — मोटे बॉर्डर, सख़्त शैडो, चटख़ रंग. हर एक Radix UI, Base UI, और React Aria, दोनों फ़्लेवर में आता है, shadcn CLI से इंस्टॉल होता है, और ऐसे कोड के रूप में मिलता है जो आपका अपना है.

लाइव पूर्वावलोकन

बटन

01/07

अपनी ही सख्त छाया में दब जाता है।

Docs
npx shadcn add neobrutalism.com/r/base/button.json
57 घटक
  • 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-रेंडर किए गए ड्रॉपडाउन के साथ नियोब्रूटलिस्ट बॉर्डर और शैडोज़।

नेविगेशन मेनू

साइट हेडर, दस्तावेज़ नेविगेशन और ऐप शेल के लिए लिंक और ड्रॉपडाउन पैनलों की एक क्षैतिज पट्टी — नियोब्रूटलिस्ट बॉर्डर और कठोर छायाओं के साथ।

पेजिनेशन

खोज परिणामों, तालिकाओं और अभिलेखागारों के लिए संख्यांकित पृष्ठ लिंक, पिछले/अगले नियंत्रणों के साथ — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ शैली में।

पॉपओवर

डेटा पिकर्स, फ़िल्टर्स, और इनलाइन फ़ॉर्म्स के लिए ट्रिगर से एंकर किया गया एक फ़्लोटिंग पैनल — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।

प्रगति

एक पतला बार जो किसी कार्य के पूरा होने पर भरता है — अपलोड, इंस्टॉल, बहु-चरणीय ऑनबोर्डिंग — जिसमें नियोब्रूटलिस्ट शैली का बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट होता है।

फ़ील्ड

सेटिंग्स पैनलों, चेकआउट फ़ॉर्मों और साइनअप फ़्लो के लिए लेबल, नियंत्रण, सहायता पाठ और त्रुटि स्लॉट — नियोब्रूटलिस्ट फ़ॉर्म ट्रीटमेंट के साथ।

बटन

फ़ॉर्म सबमिट, टूलबार और विनाशकारी पुष्टि के लिए एक क्लिक करने योग्य ट्रिगर — मोटे बॉर्डर और एक छाया के साथ, जिस पर क्लिक करने पर यह दबाव डालता है।

बटन समूह

फ्यूज़ स्प्लिट बटन, टूलबार और इनपुट ऐड-ऑन को एक फ्रेमयुक्त इकाई में जोड़ता है — एक मोटी सीमा, एक कठोर छाया, एक साझा दबाव।

बैज

कार्ड, तालिकाओं और नेविगेशन आइटम्स पर स्थितियों, गिनतियों और टैग्स के लिए एक छोटा लेबल — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।

ब्रेडक्रंब

यह दिखाता है कि पेज साइट पदानुक्रम में कहाँ स्थित है — दस्तावेज़ों, स्टोर श्रेणियों और डैशबोर्ड्स के लिंक ट्रेल्स — बोल्ड नियोब्रूटलिस्ट प्रकार में।

मेनूबार

ऐप-स्टाइल टूलबार, संपादक और डैशबोर्ड के लिए ड्रॉपडाउन मेनू की एक क्षैतिज पट्टी — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।

रिक्त

कोई परिणाम न मिलने वाली खोजों, खाली डैशबोर्डों और पहली बार चलने वाली स्क्रीन के लिए एक प्लेसहोल्डर — आइकन, शीर्षक और क्रिया नियोब्रुटलिस्ट बॉर्डर में फ्रेम की गई।

रेडियो समूह

योजनाओं, शिपिंग विकल्पों और सेटिंग्स फ़ॉर्म के लिए एकल-चयन रेडियो बटन का सेट — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।

लेबल

इनपुट्स, चेकबॉक्स, स्विच और रेडियो समूहों के लिए कैप्शन — क्लिक करने पर नियंत्रण सक्रिय होता है, जिसे नियोब्रूटलिस्ट हेडिंग फ़ॉन्ट में सेट किया गया है।

विभाजक

एक क्षैतिज या ऊर्ध्वाधर रेखा जो मेनू, टूलबार और सूचियों को विभाजित करती है — जिसे नेओब्रुटलिस्ट फ्रेमों के समान ठोस बॉर्डर रंग में खींचा गया है।

शीट

स्क्रीन के किनारे से स्लाइड-इन होने वाला एक पैनल, जो नेविगेशन ड्रॉअर, फ़िल्टर और संपादन फ़ॉर्म के लिए है — जिसमें नियोब्रूटलिस्ट शैली का बॉर्डर-और-छाया प्रभाव है।

संक्षारण योग्य

फ़ाइल ट्री, उन्नत सेटिंग्स और 'और देखें' अनुभागों के लिए एक ट्रिगर-और-पैनल जोड़ी — नियोब्रूटलिस्ट बॉर्डर्स-और-शैडोज़ ट्रीटमेंट के साथ।

संदर्भ मेनू

फ़ाइल पंक्तियों, कैनवस और डेटा ग्रिड्स के लिए राइट-क्लिक मेनू — संदर्भगत क्रियाएँ, नियोब्रूटलिस्ट शैली के बॉर्डर-और-छाया प्रभाव के साथ।

साइडबार

डैशबोर्ड, दस्तावेज़ और एडमिन टूल्स के लिए एक तह हो सकने वाला ऐप-शेल नेविगेशन पैनल — नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट के साथ।

सेलेक्ट

एक ड्रॉपडाउन जो एक विकल्प चुनने के लिए होता है — देश के फ़ील्ड, क्रमबद्ध करने के क्रम, थीम सेटिंग्स — मोटी नियोब्रूटलिस्ट सीमाओं और कठोर छायाओं के साथ।

स्केलेटन

डेटा लोड होने के दौरान कार्ड, अवतार और तालिकाओं के लिए एक धड़कता हुआ प्लेसहोल्डर ब्लॉक — नियोब्रूटलिस्ट मोटी-सीमा उपचार के साथ।

स्क्रॉल क्षेत्र

चैट पैन, साइडबार और फ़ाइल ट्री के लिए कस्टम, क्रॉस-ब्राउज़र स्क्रॉलबार वाला एक स्क्रॉल करने योग्य कंटेनर — एक मोटे नियोब्रूटलिस्ट थंब के साथ।

स्पिनर

लंबित सबमिट, फ़ेच और इनलाइन व्यस्त अवस्थाओं के लिए एक एनिमेटेड लोडिंग संकेतक — किसी भी नियोब्रुटलिस्ट नियंत्रण के लिए एक ड्रॉप-इन आइकन।

स्लाइडर

मूल्य या सीमा चुनने के लिए एक ड्रैग करने योग्य इनपुट — वॉल्यूम, मूल्य फ़िल्टर, सेटिंग्स — जिसमें नियोब्रूटलिस्ट बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट है।

स्विच

तत्काल सेटिंग्स — सूचनाएं, डार्क मोड, फीचर फ्लैग्स — के लिए ऑन/ऑफ टॉगल, जिसमें नियोब्रूटलिस्ट शैली का बॉर्डर्स-एंड-शैडोज़ ट्रीटमेंट है।

होवर कार्ड

होवर करने पर खुलने वाला एक फ्लोटिंग पूर्वावलोकन — प्रोफ़ाइल झलकियाँ, लिंक पूर्वावलोकन, शब्दावली शब्द — नियोब्रूटलिस्ट बॉर्डर्स-और-शैडोज़ ट्रीटमेंट के साथ।