Katso Lilyä oikeissa sovelluksissa
Seitsemän valmista esimerkkiprojektia näyttää, miten päättömät komponentit otetaan, tyylitellään ja julkaistaan oikea verkkosivusto. Valitse käyttämäsi kehys.
Demosovellukset täydellä CSS:llä ja reitityksellä
HTML JavaScript
Tavallisia HTML-sivuja, puhdasta JavaScriptiä, ei rakennustyökaluja. Sopii mihin tahansa staattiseen palvelimeen – täydellinen pieniin sivustoihin ja asteittaiseen parantamiseen.
Svelte + SvelteKit
SvelteKit 3 -sovellus, joka käyttää Svelte 5 -runeja. Komponenttireitit, tiedostopohjainen reititys ja jokaisen komponentin tyylitelty storybook.
React + Next.js
Next.js 16 -sovellus, joka näyttää jokaisen komponentin yhteydessään, TypeScriptillä kauttaaltaan ja demosivuilla yhdistetyille malleille.
Vue + Nuxt.js
Nuxt 4 -sovellus. <script setup> ja Composition API jokaisella demoreitillä.
Angular + Analog
Angular 22 + Analog.js -sovellus. Tiedostopohjainen reititys, signaalit, vyöhykkeetön muutostentunnistus ja täysi SSG-esirenderöinti.
Blazor Web
Blazor Web -sovellus Razor-komponenteilla. Sopii sekä palvelimelle että WebAssemblylle, pohjana .NET 10.
Nunjucks + Eleventy
Eleventy-sivusto, joka käyttää Nunjucks-makroja. Ihanteellinen sisältöpainotteisille staattisille sivustoille, jotka silti haluavat oikean komponenttijärjestelmän.
Jokaisella esimerkkisovelluksella on sama muoto
Jotta kehysten välillä hyppiminen tuntuisi tutulta, jokainen esimerkkisovellus tarjoaa:
- Tervetuloreitin osoitteessa
/joka esittelee projektin. - Komponenttihakemiston osoitteessa
/componentsjoka luettelee jokaisen komponentin. - Demosivun jokaista komponenttia kohti osoitteessa
/components/<component>. - Oikeaa CSS:ää – ei abstrakteja suunnittelutunnisteita – jotta voit lainata tyylejä suoraan.
- Toimivan näppäimistönavigoinnin ja kohdistuksen hallinnan valmiina.
Tarvitsetko nähdä, miten yksittäinen komponentti on tyylitelty?
Avaa asianomainen esimerkkisovellus, siirry osoitteeseen
/components/<name>ja kopioi merkintä ja CSS omaan projektiisi. Esimerkkisovellukset käyttävät tarkoituksella tavallista (tai lähes tavallista) CSS:ää, jotta voit mukauttaa ne mihin tahansa haluamaasi järjestelmään.
Haluatko mieluummin päättömän?
Yhdistä mikä tahansa esimerkkisovellus sitä vastaavaan päättömään pakettiin – ne julkaisevat samat komponentit ilman CSS:ää, valmiina omille suunnittelutunnisteillesi.