Examples
See Lily in real apps
Six worked example projects show how to take the headless components, layer on styling, and ship a real website. Pick the framework you use.
Batteries-included
Demo apps with full CSS and routing
HTML JavaScript
Plain HTML pages, vanilla JavaScript, no build tools. Drops into any static host — perfect for tiny sites and progressive enhancement.
Svelte + SvelteKit
SvelteKit app using Svelte 5 runes. Component routes, file-based routing, and a styled storybook of every component.
React + Next.js
Next.js 15 app showing each component in context, with TypeScript throughout and demo pages for compound patterns.
Vue + Nuxt.js
Nuxt 3 app. <script setup> and the Composition API
across every demo route.
Blazor Web
Blazor Web app with Razor components. Server- and WebAssembly-friendly, with .NET 10 baseline.
Nunjucks + Eleventy
Eleventy site using Nunjucks macros. Ideal for content-heavy static sites that still want a real component system.
What's inside
Every example app has the same shape
To make framework-hopping feel familiar, every example app provides:
- A welcome route at
/that introduces the project. - A components index at
/componentsthat lists every component. - A demo page per component at
/components/<component>. - Real CSS — not abstract design tokens — so you can crib styles directly.
- Working keyboard navigation and focus management out of the box.
Need to see how a single component is styled?
Open the relevant example app, navigate to /components/<name>, and copy the markup and CSS into your
own project. The example apps deliberately use plain CSS (or near-plain) so
you can adapt them to any system you prefer.
Want headless instead?
Pair any of the example apps with their corresponding headless package — those publish the same components without any CSS, ready for your own design tokens.