असली ऐप्स में Lily देखें
सात कार्यशील उदाहरण प्रोजेक्ट दिखाते हैं कि headless कंपोनेंट को कैसे लें, स्टाइलिंग जोड़ें और असली वेबसाइट प्रकाशित करें। वह फ़्रेमवर्क चुनें जिसका आप उपयोग करते हैं।
पूरी CSS और रूटिंग वाले डेमो ऐप्स
HTML JavaScript
सादे HTML पृष्ठ, शुद्ध JavaScript, कोई बिल्ड टूल नहीं। किसी भी स्टैटिक होस्ट पर रख दें — छोटी साइटों और क्रमिक सुधार के लिए उत्तम।
Svelte + SvelteKit
Svelte 5 रून का उपयोग करने वाला SvelteKit 3 ऐप। कंपोनेंट रूट, फ़ाइल-आधारित रूटिंग, और हर कंपोनेंट का स्टाइल किया हुआ स्टोरीबुक।
React + Next.js
Next.js 16 ऐप जो हर कंपोनेंट को उसके संदर्भ में दिखाता है, पूरे में TypeScript और मिश्रित पैटर्न के डेमो पृष्ठों के साथ।
Vue + Nuxt.js
Nuxt 4 ऐप। हर डेमो रूट पर <script setup> और Composition API।
Angular + Analog
Angular 22 + Analog.js ऐप। फ़ाइल-आधारित रूटिंग, सिग्नल, zone-रहित बदलाव की पहचान, और पूर्ण SSG प्रीरेंडरिंग।
Blazor Web
Razor कंपोनेंट वाला Blazor Web ऐप। सर्वर और WebAssembly दोनों के अनुकूल, .NET 10 आधार के साथ।
Nunjucks + Eleventy
Nunjucks मैक्रो का उपयोग करने वाली Eleventy साइट। सामग्री-प्रधान स्टैटिक साइटों के लिए आदर्श जो फिर भी असली कंपोनेंट सिस्टम चाहती हैं।
हर उदाहरण ऐप की बनावट एक जैसी है
फ़्रेमवर्कों के बीच आना-जाना परिचित लगे, इसके लिए हर उदाहरण ऐप यह उपलब्ध कराता है:
/पर एक स्वागत रूट जो प्रोजेक्ट का परिचय देता है।/componentsपर कंपोनेंट इंडेक्स जो हर कंपोनेंट की सूची देता है।/components/<component>पर प्रति कंपोनेंट एक डेमो पृष्ठ।- असली CSS — अमूर्त डिज़ाइन टोकन नहीं — ताकि आप स्टाइल सीधे उतार सकें।
- पहले ही क्षण से काम करने वाला कीबोर्ड नेविगेशन और फ़ोकस प्रबंधन।
देखना है कि एक कंपोनेंट कैसे स्टाइल हुआ है?
संबंधित उदाहरण ऐप खोलें, /components/<name> पर जाएँ, और मार्कअप तथा CSS अपने प्रोजेक्ट में नकल कर लें। उदाहरण ऐप्स जान-बूझकर सादी (या लगभग सादी) CSS का उपयोग करते हैं ताकि आप उन्हें अपनी पसंद के किसी भी सिस्टम में ढाल सकें।
इसके बजाय headless चाहिए?
किसी भी उदाहरण ऐप को उसके संबंधित headless पैकेज के साथ जोड़ें — वे वही कंपोनेंट बिना किसी CSS के प्रकाशित करते हैं, आपके अपने डिज़ाइन टोकन के लिए तैयार।