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

shadcn.io: shadcn/ui के लिए नए blocks ढूँढने की सबसे बेहतरीन जगह

कंपोनेंट आपको शुरुआत करा देते हैं, लेकिन पूरे पेज को तेज़ी से शिप blocks ही कराते हैं। यह रहा कि shadcn.io नए, प्रोडक्शन-रेडी shadcn/ui blocks ढूँढने की हमारी पसंदीदा जगह क्यों बन गई है।

अगर आप shadcn/ui के साथ बनाते हैं, तो आप जादू को पहले से जानते हैं: कोड आपका है। लड़ने के लिए कोई ब्लैक-बॉक्स डिपेंडेंसी नहीं है — आप एक कंपोनेंट कॉपी करते हैं, और वह गढ़ने के लिए आपका हो जाता है।

लेकिन कंपोनेंट छोटे टुकड़े हैं। एक बटन, एक इनपुट, एक कार्ड। असली समय की खपत उन टुकड़ों को blocks में जोड़ने में है — एक प्राइसिंग सेक्शन, एक डैशबोर्ड शेल, एक ऑथ स्क्रीन, एक फ़ीचर ग्रिड। असल में यहीं ज़्यादातर काम (और पुराने प्रोजेक्ट से ज़्यादातर कॉपी-पेस्ट) होता है।

यही वह खाई है जिसे shadcn.io भरता है, और इसीलिए हमने इसे अपनी पहली पसंद बना लिया है।

shadcn.io क्या है?

shadcn.io shadcn/ui के ऊपर बने blocks का एक बड़ा, तेज़ी से बढ़ता रजिस्ट्री है — पूरे, तैयार सेक्शन जिन्हें आप किसी पेज में डालकर शिप कर सकते हैं। प्रिमिटिव नहीं, बल्कि वे लेआउट जिन्हें आप वरना खुद जोड़ने में एक पूरी दोपहर खपा देते।

हर block वही दर्शन अपनाता है जो ख़ुद shadcn/ui का है: यह सादा कोड है जो आपका है, Tailwind से स्टाइल किया गया, बिना किसी रनटाइम लॉक-इन के। आप इसे इंस्टॉल करते हैं, और यह आपके कोडबेस का हिस्सा बन जाता है।

नए blocks ढूँढने की यह सबसे बेहतरीन जगह क्यों है

कुछ बातें इसे अलग बनाती हैं:

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

हम इसे कैसे इस्तेमाल करते हैं

हमारा अपना तरीका सीधा है: किसी ऐसे shadcn.io block से पेज शुरू कीजिए जो 80% रास्ता तय कर चुका है, फिर बचे हुए 20% को ब्रांड के हिसाब से मोड़ लीजिए। चूँकि कोड आपका है, वह आख़िरी 20% मामूली है — टोकन बदलिए, स्पेसिंग समायोजित कीजिए, हो गया। यह "एक प्राइसिंग पेज डिज़ाइन करना" को एक दिन से घटाकर एक घंटा बना देता है।

Neobrutalism ♥ shadcn.io

हमें shadcn.io के साथ साझेदारी पर गर्व है। अगर आपको shadcn/ui पर Neobrutalism का नियोब्रूटलिस्ट अंदाज़ पसंद है, तो आप उनकी block लाइब्रेरी में बिलकुल घर जैसा महसूस करेंगे — वही ओनरशिप मॉडल, वही Tailwind नींव, कहीं ज़्यादा दायरा।

shadcn.io पर जाकर कलेक्शन ब्राउज़ कीजिए और देखिए कि जब blocks पहले से तैयार हों, तो एक पेज कितनी तेज़ी से बन जाता है।


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