Zie Lily in echte apps
Zeven uitgewerkte voorbeeldprojecten laten zien hoe je de headless componenten neemt, er opmaak overheen legt en een echte website live zet. Kies het framework dat je gebruikt.
Demo-apps met volledige CSS en routing
HTML JavaScript
Gewone HTML-pagina's, pure JavaScript, geen buildtools. Past op elke statische host – perfect voor kleine sites en progressive enhancement.
Svelte + SvelteKit
SvelteKit 3-app met Svelte 5-runes. Componentroutes, bestandsgebaseerde routing en een opgemaakte storybook van elke component.
React + Next.js
Next.js 16-app die elke component in context toont, met overal TypeScript en demopagina's voor samengestelde patronen.
Vue + Nuxt.js
Nuxt 4-app. <script setup> en de Composition API op elke demoroute.
Angular + Analog
Angular 22 + Analog.js-app. Bestandsgebaseerde routing, signals, zoneloze wijzigingsdetectie en volledige SSG-prerendering.
Blazor Web
Blazor Web-app met Razor-componenten. Geschikt voor server en WebAssembly, met .NET 10 als basis.
Nunjucks + Eleventy
Eleventy-site met Nunjucks-macro's. Ideaal voor inhoudrijke statische sites die toch een echt componentsysteem willen.
Elke voorbeeldapp heeft dezelfde vorm
Om van framework wisselen vertrouwd te laten voelen, biedt elke voorbeeldapp:
- Een welkomstroute op
/die het project introduceert. - Een componentenindex op
/componentsdie elke component toont. - Een demopagina per component op
/components/<component>. - Echte CSS – geen abstracte designtokens – zodat je stijlen direct kunt overnemen.
- Werkende toetsenbordnavigatie en focusbeheer direct uit de doos.
Wil je zien hoe één component is opgemaakt?
Open de betreffende voorbeeldapp, ga naar
/components/<name>en kopieer de markup en CSS naar je eigen project. De voorbeeldapps gebruiken bewust gewone (of bijna gewone) CSS, zodat je ze kunt aanpassen aan elk systeem dat je prefereert.
Liever headless?
Combineer elke voorbeeldapp met het bijbehorende headless pakket – die publiceren dezelfde componenten zonder enige CSS, klaar voor je eigen designtokens.