Lily in echten Apps sehen
Sieben ausgearbeitete Beispielprojekte zeigen, wie man die Headless-Komponenten nimmt, Gestaltung darüberlegt und eine echte Website ausliefert. Wählen Sie das Framework, das Sie nutzen.
Demo-Apps mit vollständigem CSS und Routing
HTML JavaScript
Schlichte HTML-Seiten, reines JavaScript, keine Build-Werkzeuge. Passt auf jeden statischen Host – perfekt für kleine Websites und progressive Verbesserung.
Svelte + SvelteKit
SvelteKit-3-App mit Svelte-5-Runes. Komponentenrouten, dateibasiertes Routing und ein gestaltetes Storybook jeder Komponente.
React + Next.js
Next.js-16-App, die jede Komponente im Kontext zeigt, durchgehend mit TypeScript und Demoseiten für zusammengesetzte Muster.
Vue + Nuxt.js
Nuxt-4-App. <script setup> und die Composition API in jeder Demoroute.
Angular + Analog
Angular-22- + Analog.js-App. Dateibasiertes Routing, Signals, zonenlose Änderungserkennung und vollständiges SSG-Prerendering.
Blazor Web
Blazor-Web-App mit Razor-Komponenten. Geeignet für Server und WebAssembly, mit .NET 10 als Basis.
Nunjucks + Eleventy
Eleventy-Website mit Nunjucks-Makros. Ideal für inhaltsreiche statische Websites, die dennoch ein echtes Komponentensystem wollen.
Jede Beispiel-App hat dieselbe Form
Damit der Wechsel zwischen Frameworks vertraut wirkt, bietet jede Beispiel-App:
- Eine Willkommensroute unter
/die das Projekt vorstellt. - Einen Komponentenindex unter
/componentsder jede Komponente auflistet. - Eine Demoseite pro Komponente unter
/components/<component>. - Echtes CSS – keine abstrakten Design-Tokens –, sodass Sie Stile direkt übernehmen können.
- Funktionierende Tastaturnavigation und Fokusverwaltung von Anfang an.
Möchten Sie sehen, wie eine einzelne Komponente gestaltet ist?
Öffnen Sie die passende Beispiel-App, navigieren Sie zu
/components/<name>und kopieren Sie das Markup und das CSS in Ihr eigenes Projekt. Die Beispiel-Apps verwenden bewusst schlichtes (oder fast schlichtes) CSS, damit Sie sie an jedes System anpassen können, das Sie bevorzugen.
Lieber headless?
Kombinieren Sie jede der Beispiel-Apps mit dem zugehörigen Headless- Paket – diese veröffentlichen dieselben Komponenten ganz ohne CSS, bereit für Ihre eigenen Design-Tokens.