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

24 जनवरी 2026

retrouiघोषणालॉन्चप्रोडक्ट अपडेट

पेश है RetroUI 2.0 - बड़ा, बोल्डर, बेहतर

महीनों की मेहनत के बाद, RetroUI 2.0 आ चुकी है। Base UI सपोर्ट, एकीकृत वेबसाइट, बेहतर docs, 100+ नए blocks, और एक बिलकुल नया टेम्प्लेट। यह अब तक का हमारा सबसे बड़ा अपडेट है।

DA

Dov Azencot

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

महीनों से हम अँधेरे में बना रहे थे। आज, हम बत्तियाँ जला रहे हैं।


RetroUI 2.0 आ चुकी है, और यह अब तक का हमारा सबसे बड़ा अपडेट है। यह महज़ एक वर्ज़न नंबर की छलाँग नहीं है — यह इस बात का पूरा विकास है कि RetroUI क्या कर सकती है और आप उसके साथ कैसे जुड़ते हैं।


जब हमने RetroUI लॉन्च की, तो लक्ष्य सीधा था: डेवलपर्स को एक ऐसी UI लाइब्रेरी देना जो बाकी सबके जैसी न दिखे। बोल्ड डिज़ाइन, नियोब्रूटलिस्ट सौंदर्य, और ऐसे कंपोनेंट जो आपके प्रोजेक्ट को अलग दिखाएँ। वह दृष्टि नहीं बदली है। लेकिन हम उसे कैसे पूरा करते हैं? वह नाटकीय रूप से बदला है।


आइए देखते हैं क्या नया है।


🎨 Base UI सपोर्ट - वह नींव जो आप माँग रहे थे

पहले दिन से सबसे ज़्यादा माँगे गए फ़ीचर में से एक रहा है Base UI सपोर्ट, और आख़िरकार यह आ गया।


Base UI क्या है?

Base UI बिना स्टाइल वाले, एक्सेसिबल React कंपोनेंट की एक लाइब्रेरी है, जिसे MUI टीम ने बनाया है। इसे Material UI के हेडलेस, फ़्रेमवर्क-अज्ञेय विकल्प के रूप में देखिए — आपको सारा बर्ताव और एक्सेसिबिलिटी लॉजिक मिलता है, बिना किसी स्टाइलिंग की राय के।


यह RetroUI के लिए क्यों मायने रखता है

अब तक, RetroUI के कंपोनेंट Radix UI प्रिमिटिव पर बने थे (जो बेहतरीन हैं, ग़लत मत समझिए)। लेकिन Base UI नई संभावनाएँ खोलता है:

  • फ़्रेमवर्क लचीलापन: Base UI React, Next.js और दूसरे आधुनिक फ़्रेमवर्क में बिना अटके काम करता है
  • बेहतर tree-shaking: बेहतर ऑप्टिमाइज़ेशन के साथ छोटे बंडल साइज़
  • मज़बूत एक्सेसिबिलिटी: Base UI के एक्सेसिबिलिटी प्रिमिटिव पूरी तरह परखे हुए और आउट ऑफ़ द बॉक्स WCAG-अनुरूप हैं
  • भविष्य के लिए तैयार आर्किटेक्चर: React Server Components और आधुनिक React इकोसिस्टम के लिए बनाया गया

इसका आपके लिए क्या मतलब है? RetroUI के कंपोनेंट अब पहले से कहीं ज़्यादा तेज़, ज़्यादा एक्सेसिबल और ज़्यादा लचीले हैं। और यह सब उस बोल्ड, विशिष्ट डिज़ाइन भाषा को बनाए रखते हुए जो आपको पसंद है।


// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>


🌐 एक वेबसाइट, एक दृष्टि - OS और Pro एक साथ

एक बात हमें खटकती थी: RetroUI OS (मुफ़्त) और RetroUI Pro के लिए अलग-अलग वेबसाइटें रखना... बिखरा हुआ लगता था। मानो हम अपनी कम्युनिटी को साथ लाने के बजाय बाँट रहे हों।


अब और नहीं।


पूरी तरह रीडिज़ाइन की गई वेबसाइट

हमने पूरी RetroUI वेबसाइट को शून्य से दोबारा बनाया है, OS और Pro को एक सुसंगत अनुभव में मिलाते हुए। यह रहा क्या नया है:


एकीकृत कंपोनेंट लाइब्रेरी

सभी कंपोनेंट — मुफ़्त और pro — एक ही जगह ब्राउज़ कीजिए। क्या उपलब्ध है यह देखने के लिए अब साइटों के बीच कूदना नहीं पड़ेगा। सब कुछ साफ़-साफ़ चिह्नित है, इसलिए आपको पता रहता है कि क्या मुफ़्त है और क्या प्रीमियम।


ज़्यादा साफ़ नेविगेशन

जो चाहिए उसे ढूँढना ज़्यादा तेज़ और ज़्यादा सहज है। कंपोनेंट, blocks, टेम्प्लेट, docs — हर चीज़ का एक तार्किक ठिकाना है।


ज़्यादा निखरा हुआ डिज़ाइन

हम जो कहते हैं वही करते हैं। नई साइट ज़्यादा बोल्ड, ज़्यादा तेज़ और ज़्यादा परिष्कृत है। यह इस बात की झाँकी है कि जब आप इस सौंदर्य से पूरी तरह जुड़ते हैं, तो RetroUI क्या कर सकती है।


बेहतर मोबाइल अनुभव

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


सबसे अच्छी बात? यह सब RetroUI कंपोनेंट पर चलता है। हम खुद अपनी लाइब्रेरी इस्तेमाल कर रहे हैं, यानी साइट पर आप जो भी कंपोनेंट देखते हैं, उसे आप अपने प्रोजेक्ट में इस्तेमाल कर सकते हैं।



📚 ऐसी डॉक्युमेंटेशन जो सचमुच मदद करती है

सच कहें तो: डॉक्युमेंटेशन अक्सर बाद की सोच होती है। इस बार नहीं।


हमने RetroUI docs को पूरी तरह से नया रूप दिया है, ऐसे फ़ीचर के साथ जो आपकी ज़िंदगी आसान बनाते हैं:


Markdown के रूप में कॉपी करें

अपने प्रोजेक्ट की डॉक्युमेंटेशन पर काम कर रहे हैं? RetroUI के बारे में कोई ब्लॉग पोस्ट लिख रहे हैं? अब आप कंपोनेंट कोड को Markdown के रूप में एक ही क्लिक से कॉपी कर सकते हैं।


इनके लिए एकदम सही:

  • अपने कंपोनेंट की डॉक्युमेंटेशन बनाना
  • ट्यूटोरियल और गाइड लिखना
  • Markdown-आधारित टूल में कोड उदाहरण साझा करना (Notion, GitHub, आदि)

AI-संचालित डॉक्युमेंटेशन

हमने AI सहायता को सीधे docs में जोड़ दिया है। किसी कंपोनेंट को कस्टमाइज़ करने को लेकर कोई सवाल है? API समझना है? AI आपको डॉक्युमेंटेशन के पन्ने खंगालने से कहीं तेज़ी से जवाब ढूँढने में मदद कर सकता है।


आप क्या पूछ सकते हैं, इसके उदाहरण:

  • "मैं Button कंपोनेंट से कस्टम रंग कैसे इस्तेमाल कराऊँ?"
  • "Card कंपोनेंट कौन-से props स्वीकार करता है?"
  • "मुझे फ़ॉर्म के साथ Modal इस्तेमाल करने के उदाहरण दिखाओ"

यह ऐसा है जैसे एक RetroUI विशेषज्ञ हर वक़्त, 24/7 हाज़िर हो।


बेहतर कोड उदाहरण

हर कंपोनेंट में अब है:

  • लाइव प्रीव्यू जिनसे आप इंटरैक्ट कर सकते हैं
  • कई वेरिएंट जो अलग-अलग इस्तेमाल दिखाते हैं
  • कॉपी-पेस्ट के लिए तैयार कोड सही imports के साथ
  • TypeScript उदाहरण बेहतर टाइप सुरक्षा के लिए
  • एक्सेसिबिलिटी नोट जो बताते हैं कि हर कंपोनेंट a11y को कैसे संभालता है

अब कोई अटकल नहीं। अब सोर्स कोड खंगालना नहीं। बस साफ़, मददगार उदाहरण जो आपको तेज़ी से बनाने में लगा देते हैं।



🧱 100+ नए UI Blocks - पहले से कहीं तेज़ बनाइए

कंपोनेंट बढ़िया हैं। लेकिन कभी-कभी आपको पूरे सेक्शन चाहिए होते हैं, सिर्फ़ बटन और कार्ड नहीं।


यहीं blocks काम आते हैं।


Blocks क्या हैं?

Blocks पहले से बने सेक्शन हैं जिन्हें आप अपने प्रोजेक्ट में डाल सकते हैं: हीरो सेक्शन, प्राइसिंग टेबल, फ़ीचर ग्रिड, टेस्टिमोनियल, CTA और भी बहुत कुछ। ये पूरी तरह रिस्पॉन्सिव, एक्सेसिबल और कस्टमाइज़ करने के लिए तैयार हैं।


2.0 में क्या नया है?

हमने हर उस कैटेगरी में 100 से ज़्यादा नए blocks जोड़े हैं जिसकी आप कल्पना कर सकते हैं:


हीरो सेक्शन

  • मिनिमलिस्ट से लेकर फ़ुल-ब्लीड तक, 15+ नए हीरो वेरिएशन
  • इसमें एनिमेटेड बैकग्राउंड, स्प्लिट-स्क्रीन लेआउट और वीडियो हीरो शामिल हैं

फ़ीचर और फ़ायदे

  • आइकन-आधारित फ़ीचर ग्रिड
  • स्क्रीनशॉट शोकेस
  • कदम-दर-कदम गाइड
  • तुलना टेबल

प्राइसिंग टेबल

  • सादे 2-कॉलम लेआउट से लेकर जटिल 4-टियर प्राइसिंग तक
  • बिलिंग टॉगल (मासिक/सालाना)
  • फ़ीचर तुलना मैट्रिक्स

टेस्टिमोनियल

  • ग्रिड लेआउट, कैरोसेल और मेसनरी डिज़ाइन
  • वीडियो टेस्टिमोनियल
  • सोशल प्रूफ़ के लिए लोगो वॉल

CTA और कन्वर्ज़न

  • न्यूज़लेटर साइनअप
  • वेटलिस्ट फ़ॉर्म
  • ऐप डाउनलोड सेक्शन
  • व्यक्तित्व वाले कॉन्टैक्ट फ़ॉर्म

हेडर और नेविगेशन

  • मेगा मेनू
  • मोबाइल-पहले नेविगेशन पैटर्न
  • स्क्रॉल इफ़ेक्ट वाले स्टिकी हेडर

फ़ुटर

  • मल्टी-कॉलम फ़ुटर
  • मिनिमल सिंगल-रो फ़ुटर
  • न्यूज़लेटर-एकीकृत फ़ुटर

हर block उसी बोल्ड RetroUI सौंदर्य के साथ बना है — मोटे बॉर्डर, सख़्त शैडो, जीवंत रंग और असममित लेआउट। इन्हें अलग दिखने के लिए डिज़ाइन किया गया है, घुल-मिल जाने के लिए नहीं।


// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
 
<HeroBold
  title="Your Product Name"
  subtitle="Ship faster with bold design"
  cta="Get Started"
/>


🌙 नया टेम्प्लेट: डार्क मोड डेव टूल डैशबोर्ड

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


पेश है हमारा सबसे नया टेम्प्लेट: Dark Mode Dev Tool Dashboard।


यह क्या है?

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


इसमें क्या शामिल है?

संपूर्ण डैशबोर्ड लेआउट

  • कोलैप्सिबल मेनू के साथ साइडबार नेविगेशन
  • सर्च और यूज़र प्रोफ़ाइल के साथ टॉप हेडर
  • रिस्पॉन्सिव डिज़ाइन जो मोबाइल, टैबलेट और डेस्कटॉप पर काम करता है

पहले से बने पेज

  • मेट्रिक और चार्ट के साथ डैशबोर्ड ओवरव्यू
  • यूज़र मैनेजमेंट (लिस्ट, डिटेल, एडिट)
  • फ़ॉर्म उदाहरणों के साथ सेटिंग्स पेज
  • API डॉक्युमेंटेशन पेज
  • बिलिंग और सब्सक्रिप्शन मैनेजमेंट

सही तरीके से किया गया डार्क मोड

  • सिर्फ़ उलटे रंग नहीं — जान-बूझकर डार्क बैकग्राउंड के लिए डिज़ाइन किया गया
  • पठनीयता के लिए हाई कंट्रास्ट
  • जीवंत एक्सेंट रंग जो डार्क बैकग्राउंड पर उभरकर आते हैं

प्रोडक्शन-रेडी फ़ीचर

  • ऑथेंटिकेशन स्क्रीन (लॉगिन, साइनअप, पासवर्ड भूल गए)
  • एरर स्टेट और एम्प्टी स्टेट
  • लोडिंग स्केलेटन
  • टोस्ट नोटिफ़िकेशन
  • मॉडल डायलॉग और कन्फ़र्मेशन

डेवलपर-अनुकूल

  • TypeScript के साथ बनाया गया
  • डॉक्युमेंटेड कंपोनेंट संरचना
  • कस्टमाइज़ और एक्सटेंड करने में आसान
  • Next.js App Router परंपराओं का पालन करता है

यह कोई खिलौना टेम्प्लेट नहीं है। यह एक ऐसी नींव है जिस पर आप असली प्रोडक्ट के लिए निर्माण कर सकते हैं। चाहे आप कोई नया SaaS लॉन्च कर रहे हों, कोई इंटरनल टूल बना रहे हों, या कोई डेवलपर प्लेटफ़ॉर्म बना रहे हों, यह टेम्प्लेट आपको शुरुआती बढ़त देता है।


और हाँ, यह बाज़ार के बाकी हर डैशबोर्ड टेम्प्लेट से बिलकुल अलग दिखता है। यही तो बात है।



यह क्यों मायने रखता है

RetroUI 2.0 सिर्फ़ फ़ीचर जोड़ने के बारे में नहीं है। यह RetroUI को ज़्यादा दमदार, ज़्यादा लचीली और असल दुनिया के प्रोजेक्ट के लिए ज़्यादा उपयोगी बनाने के बारे में है।


Base UI सपोर्ट का मतलब है बेहतर परफ़ॉर्मेंस और एक्सेसिबिलिटी।

एकीकृत वेबसाइट का मतलब है आसान खोज और सबके लिए बेहतर अनुभव।

बेहतर docs का मतलब है खोजने में कम समय, बनाने में ज़्यादा समय।

100+ नए blocks का मतलब है कि आप पूरे पेज मिनटों में शिप कर सकते हैं, दिनों में नहीं।

डार्क मोड टेम्प्लेट का मतलब है कि आपके अगले प्रोजेक्ट के लिए आपके पास एक ठोस नींव है।


मिलकर, ये अपडेट RetroUI 2.0 को उन डेवलपर्स के लिए सबसे संपूर्ण, प्रोडक्शन-रेडी UI लाइब्रेरी बनाते हैं जो उबाऊ इंटरफ़ेस बनाने से इनकार करते हैं।



आगे क्या?

यह एक बड़ा रिलीज़ है, लेकिन हम यहीं नहीं रुक रहे। यह रहा रोडमैप पर क्या है:


  • और टेम्प्लेट (लाइट मोड वेरिएंट, लैंडिंग पेज, ई-कॉमर्स)
  • तेज़ डिज़ाइन-से-डेवलपमेंट वर्कफ़्लो के लिए Figma to Code इंटीग्रेशन
  • लाइब्रेरी बढ़ाने के साथ और Base UI कंपोनेंट
  • RetroUI के साथ बने प्रोजेक्ट को दिखाता कम्युनिटी शोकेस
  • आम पैटर्न और इस्तेमाल को समझाते वीडियो ट्यूटोरियल

हम सुन भी रहे हैं। अगर कोई कंपोनेंट चाहिए, कोई फ़ीचर चाहिए, या किसी समस्या से जूझ रहे हैं, तो हमें बताइए। RetroUI डेवलपर्स के लिए, डेवलपर्स के द्वारा बनी है। आपका फ़ीडबैक तय करता है कि हम आगे क्या बनाते हैं।



आज ही RetroUI 2.0 आज़माइए

शुरू करने को तैयार हैं? यह रहा कैसे शुरुआत करें:


नए यूज़र के लिए

# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

कंपोनेंट ब्राउज़ कीजिए, blocks खंगालिए, और नया टेम्प्लेट हासिल कीजिए। सब कुछ आपके Next.js, React या Vite प्रोजेक्ट में इस्तेमाल के लिए तैयार है।


मौजूदा यूज़र के लिए

अगर आप पहले से RetroUI इस्तेमाल कर रहे हैं, तो 2.0 पर अपग्रेड करना सीधा है:

pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest

किसी भी breaking change के लिए changelog देखिए (बहुत कम हैं, और हमने उन सबके लिए उपाय डॉक्युमेंट कर दिए हैं)।



धन्यवाद

RetroUI इसलिए मौजूद है क्योंकि आप जैसे डेवलपर्स जेनेरिक डिज़ाइन से थक चुके हैं। आप ऐसी चीज़ें बनाना चाहते हैं जो अलग दिखें, जिनमें व्यक्तित्व हो, जो अलग महसूस हों।


हम उसे आसान बनाने के लिए यहाँ हैं।


वर्ज़न 2.0 महीनों की मेहनत, सैकड़ों commits, अनगिनत डिज़ाइन दोहरावों, और एक शानदार कम्युनिटी के फ़ीडबैक का नतीजा है। इस सफ़र का हिस्सा बनने के लिए धन्यवाद।


अब जाइए, कुछ बोल्ड बनाइए। 🚀



RetroUI 2.0 को एक्सप्लोर कीजिए:


सवाल? फ़ीडबैक? कोई bug मिला? GitHub पर एक issue खोलिए या Twitter/X पर संपर्क कीजिए।

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

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