Lily'yi gerçek uygulamalarda görün
Yedi çalışan örnek proje, başsız bileşenleri nasıl alıp üzerine biçimlendirme ekleyeceğinizi ve gerçek bir web sitesini nasıl yayına alacağınızı gösterir. Kullandığınız çerçeveyi seçin.
Tam CSS ve yönlendirmeli demo uygulamalar
HTML JavaScript
Düz HTML sayfaları, saf JavaScript, derleme aracı yok. Herhangi bir statik barındırıcıya oturur — küçük siteler ve aşamalı geliştirme için ideal.
Svelte + SvelteKit
Svelte 5 rune'larını kullanan SvelteKit 3 uygulaması. Bileşen rotaları, dosya tabanlı yönlendirme ve her bileşenin biçimlendirilmiş storybook'u.
React + Next.js
Her bileşeni bağlam içinde gösteren Next.js 16 uygulaması; baştan sona TypeScript ve bileşik desenler için demo sayfaları.
Vue + Nuxt.js
Nuxt 4 uygulaması. <script setup> ve Composition API, her demo rotasında.
Angular + Analog
Angular 22 + Analog.js uygulaması. Dosya tabanlı yönlendirme, sinyaller, bölgesiz (zoneless) değişiklik algılama ve tam SSG ön oluşturma.
Blazor Web
Razor bileşenli Blazor Web uygulaması. Sunucu ve WebAssembly dostu, .NET 10 tabanlı.
Nunjucks + Eleventy
Nunjucks makrolarını kullanan Eleventy sitesi. Yine de gerçek bir bileşen sistemi isteyen içerik ağırlıklı statik siteler için ideal.
Her örnek uygulama aynı biçimdedir
Çerçeveler arasında geçişi tanıdık kılmak için her örnek uygulama şunları sağlar:
- Projeyi tanıtan,
/adresinde bir karşılama rotası. - Her bileşeni listeleyen,
/componentsadresinde bir bileşen dizini. - Bileşen başına bir demo sayfası:
/components/<component>. - Soyut tasarım belirteçleri değil, gerçek CSS — böylece stilleri doğrudan alabilirsiniz.
- Kutudan çıktığı gibi çalışan klavye gezinmesi ve odak yönetimi.
Tek bir bileşenin nasıl biçimlendirildiğini mi görmek istiyorsunuz?
İlgili örnek uygulamayı açın,
/components/<name>adresine gidin ve işaretlemeyi ile CSS'i kendi projenize kopyalayın. Örnek uygulamalar kasıtlı olarak düz (veya düze yakın) CSS kullanır; böylece onları tercih ettiğiniz herhangi bir sisteme uyarlayabilirsiniz.
Bunun yerine başsız mı istiyorsunuz?
Herhangi bir örnek uygulamayı karşılık gelen başsız paketle eşleştirin — bunlar aynı bileşenleri hiç CSS olmadan yayımlar, kendi tasarım belirteçlerinize hazırdır.