Lihat Lily dalam aplikasi sebenar
Tujuh projek contoh berfungsi menunjukkan cara mengambil komponen tanpa kepala, menambah gaya dan melancarkan tapak web sebenar. Pilih rangka kerja yang anda gunakan.
Aplikasi demo dengan CSS penuh dan penghalaan
HTML JavaScript
Halaman HTML biasa, JavaScript vanila, tiada alat binaan. Sesuai pada mana-mana hos statik — sempurna untuk tapak kecil dan peningkatan progresif.
Svelte + SvelteKit
Aplikasi SvelteKit 3 menggunakan runes Svelte 5. Laluan komponen, penghalaan berasaskan fail dan storybook bergaya bagi setiap komponen.
React + Next.js
Aplikasi Next.js 16 yang menunjukkan setiap komponen dalam konteks, dengan TypeScript sepanjang masa dan halaman demo untuk corak majmuk.
Vue + Nuxt.js
Aplikasi Nuxt 4. <script setup> dan Composition API pada setiap laluan demo.
Angular + Analog
Aplikasi Angular 22 + Analog.js. Penghalaan berasaskan fail, isyarat, pengesanan perubahan tanpa zon dan prarender SSG penuh.
Blazor Web
Aplikasi Blazor Web dengan komponen Razor. Mesra pelayan dan WebAssembly, dengan asas .NET 10.
Nunjucks + Eleventy
Tapak Eleventy menggunakan makro Nunjucks. Sesuai untuk tapak statik yang kaya kandungan yang masih mahukan sistem komponen sebenar.
Setiap aplikasi contoh mempunyai bentuk yang sama
Supaya melompat antara rangka kerja terasa biasa, setiap aplikasi contoh menyediakan:
- Laluan sambutan di
/yang memperkenalkan projek. - Indeks komponen di
/componentsyang menyenaraikan setiap komponen. - Halaman demo bagi setiap komponen di
/components/<component>. - CSS sebenar — bukan token reka bentuk abstrak — supaya anda boleh meniru gaya terus.
- Navigasi papan kekunci dan pengurusan fokus yang berfungsi terus.
Perlu melihat bagaimana satu komponen digayakan?
Buka aplikasi contoh yang berkaitan, pergi ke
/components/<name>, dan salin markup serta CSS ke projek anda sendiri. Aplikasi contoh sengaja menggunakan CSS biasa (atau hampir biasa) supaya anda boleh menyesuaikannya dengan sistem apa pun yang anda suka.
Mahu tanpa kepala sahaja?
Pasangkan mana-mana aplikasi contoh dengan pakej tanpa kepala yang sepadan — ia menerbitkan komponen yang sama tanpa sebarang CSS, sedia untuk token reka bentuk anda sendiri.