વાસ્તવિક એપ્સમાં 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 વિના પ્રકાશિત કરે છે, તમારા પોતાના ડિઝાઇન ટોકન માટે તૈયાર.