असली ऐप में Lily देखीं
सात काम करे वाला उदाहरण परियोजना देखावेलें कि हेडलेस घटक लेके, शैली चढ़ा के, असली वेबसाइट कइसे शिप कइल जाला। जवन फ्रेमवर्क रउआ प्रयोग करीले ऊ चुनीं।
पूरा 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 ऐप। फाइल-आधारित रूटिंग, सिग्नल, जोन-रहित बदलाव पहचान, आ पूरा SSG प्रीरेंडरिंग।
Blazor Web
Razor घटक वाला Blazor Web ऐप। सर्वर- आ WebAssembly-अनुकूल, .NET 10 बेसलाइन के साथे।
Nunjucks + Eleventy
Nunjucks मैक्रो प्रयोग करे वाला Eleventy साइट। सामग्री-भारी स्थैतिक साइट खातिर आदर्श जे तबो असली घटक प्रणाली चाहेलें।
हर उदाहरण ऐप के एके आकार बा
फ्रेमवर्क के बीच कूदल परिचित लागे, एहसे हर उदाहरण ऐप देला:
- इहाँ एगो स्वागत रूट
/जे परियोजना के परिचय करावेला। - इहाँ एगो घटक अनुक्रमणिका
/componentsजे हर घटक के सूची देला। - इहाँ हर घटक खातिर एगो डेमो पन्ना
/components/<component>. - असली CSS — अमूर्त डिजाइन टोकन ना — ताकि रउआ शैली सीधे उधार ले सकीं।
- बक्सा से सीधे काम करे वाला कीबोर्ड नेविगेशन आ फोकस प्रबंधन।
एगो घटक के शैली कइसे दिहल गइल बा ऊ देखे के बा?
संबंधित उदाहरण ऐप खोलीं, इहाँ जाईं
/components/<name>आ मार्कअप आ CSS आपन परियोजना में कॉपी करीं। उदाहरण ऐप जानबूझ के सादा (भा लगभग सादा) CSS प्रयोग करेलें ताकि रउआ उनहन के कवनो पसंदीदा प्रणाली में ढाल सकीं।
एकरा बदले हेडलेस चाहीं?
कवनो उदाहरण ऐप के एकरा संबंधित हेडलेस पैकेज के साथे जोड़ीं — ऊ उहे घटक बिना कवनो CSS के प्रकाशित करेलें, रउआ के आपन डिजाइन टोकन खातिर तैयार।