Tingnan ang Lily sa mga tunay na app
Ipinapakita ng pitong halimbawang proyekto kung paano kunin ang mga headless na component, magdagdag ng istilo, at mag-ship ng tunay na website. Piliin ang framework na ginagamit mo.
Mga demo app na may buong CSS at routing
HTML JavaScript
Karaniwang HTML page, vanilla JavaScript, walang build tool. Kasya sa anumang static host — perpekto para sa maliliit na site at progressive enhancement.
Svelte + SvelteKit
SvelteKit 3 app na gumagamit ng mga rune ng Svelte 5. Mga ruta ng component, file-based na routing, at may istilong storybook ng bawat component.
React + Next.js
Next.js 16 app na nagpapakita ng bawat component sa konteksto, na may TypeScript sa kabuuan at mga demo page para sa mga compound na pattern.
Vue + Nuxt.js
Nuxt 4 app. <script setup> at ang Composition API sa bawat demo route.
Angular + Analog
Angular 22 + Analog.js app. File-based na routing, mga signal, zoneless na change detection, at buong SSG prerendering.
Blazor Web
Blazor Web app na may mga Razor component. Magiliw sa server at WebAssembly, na may .NET 10 baseline.
Nunjucks + Eleventy
Eleventy site na gumagamit ng mga Nunjucks macro. Mainam para sa mga static site na mabigat sa nilalaman na gusto pa rin ng tunay na sistema ng component.
Pareho ang hugis ng bawat halimbawang app
Para maging pamilyar ang paglipat-lipat ng framework, bawat halimbawang app ay nagbibigay ng:
- Isang welcome route sa
/na nagpapakilala sa proyekto. - Isang index ng component sa
/componentsna naglilista ng bawat component. - Isang demo page para sa bawat component sa
/components/<component>. - Tunay na CSS — hindi abstract na design token — para direkta mong makopya ang mga istilo.
- Gumaganang pag-navigate gamit ang keyboard at pamamahala ng focus agad-agad.
Kailangan mong makita kung paano binigyan ng istilo ang isang component?
Buksan ang kaukulang halimbawang app, pumunta sa
/components/<name>, at kopyahin ang markup at CSS sa sarili mong proyekto. Sadyang gumagamit ng simpleng CSS (o halos simple) ang mga halimbawang app para maiangkop mo ang mga ito sa anumang sistemang gusto mo.
Gusto mo ng headless sa halip?
Ipares ang anumang halimbawang app sa katumbas nitong headless na package — inilalathala nila ang parehong mga component na walang anumang CSS, handa para sa sarili mong mga design token.