Se Lily i rigtige apps
Syv gennemarbejdede eksempelprojekter viser, hvordan du tager de hovedløse komponenter, lægger stilarter ovenpå og udgiver et rigtigt websted. Vælg det framework, du bruger.
Demoapps med fuld CSS og routing
HTML JavaScript
Almindelige HTML-sider, ren JavaScript, ingen byggeværktøjer. Passer på enhver statisk vært – perfekt til små websteder og progressiv forbedring.
Svelte + SvelteKit
SvelteKit 3-app med Svelte 5-runes. Komponentruter, filbaseret routing og en stilet storybook over hver komponent.
React + Next.js
Next.js 16-app, der viser hver komponent i sammenhæng, med TypeScript hele vejen og demosider til sammensatte mønstre.
Vue + Nuxt.js
Nuxt 4-app. <script setup> og Composition API på hver demorute.
Angular + Analog
Angular 22 + Analog.js-app. Filbaseret routing, signaler, zoneløs ændringsregistrering og fuld SSG-præ-gengivelse.
Blazor Web
Blazor Web-app med Razor-komponenter. Egnet til både server og WebAssembly, med .NET 10 som baseline.
Nunjucks + Eleventy
Eleventy-websted med Nunjucks-makroer. Ideelt til indholdstunge statiske websteder, der stadig vil have et rigtigt komponentsystem.
Hver eksempelapp har samme form
For at det kan føles velkendt at skifte mellem frameworks, tilbyder hver eksempelapp:
- En velkomstrute på
/der præsenterer projektet. - Et komponentindeks på
/componentsder viser hver komponent. - En demoside pr. komponent på
/components/<component>. - Ægte CSS – ikke abstrakte designtokens – så du kan låne stilarter direkte.
- Fungerende tastaturnavigation og fokushåndtering fra start.
Skal du se, hvordan en enkelt komponent er stilet?
Åbn den relevante eksempelapp, gå til
/components/<name>og kopiér markup og CSS ind i dit eget projekt. Eksempelapps bruger bevidst almindelig (eller næsten almindelig) CSS, så du kan tilpasse dem til ethvert system, du foretrækker.
Vil du hellere have hovedløst?
Par enhver eksempelapp med den tilsvarende hovedløse pakke – de udgiver de samme komponenter helt uden CSS, klar til dine egne designtokens.