वास्तविक अॅप्समध्ये 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 शिवाय प्रकाशित करतात, तुमच्या स्वतःच्या डिझाइन टोकनसाठी तयार.