What is Lily?

The short version

Lily is a catalog of web components, each implemented in six headless flavors (HTML, Svelte, React, Vue, Blazor, Nunjucks) plus a set of batteries-included example apps that show how to style them.

The headless versions ship zero CSS. They give you semantic HTML, ARIA roles and states, keyboard support, and i18n-friendly props. You bring the visual design.

Design principles

Accessible

Every component starts from semantic HTML. ARIA is layered on only where the HTML alone can't express the pattern. Components target WCAG 2.2 AAA — colors, spacing, focus, and keyboard navigation are all considered.

Composable

Lily favors small, single-purpose components that snap together. Compound patterns appear over and over:

• Nav → List → ListItem — for breadcrumbs, contents lists, accordion menus, tree menus, and pagination
• Form → Field → Input — for any form layout with labels, hints, and errors
• Table → Head/Body/Foot → Row → Data — for tables, calendars, gantt charts, and kanban boards
• Bar → BarButton — for tool bars, tab bars, task bars, action bars, and menu bars
• Picker → PickerButton — for color pickers, rating pickers, theme pickers

Internationalizable

Not a single user-facing string is hardcoded. Labels, placeholders, error messages, button text — all parameters. Drop in your own translation system and Lily speaks any language you do.

Headless

Headless components have no CSS, no <style> blocks, no design tokens you didn't opt into. They expose a single kebab-case class name on each root element so you can target them however you like — semantic CSS, Tailwind, CSS-in-JS, your call.

Batteries-included examples

The example apps show how to style the components for real use — what design tokens to set, what variations to add, how to compose pages. They are full SvelteKit, Next.js, Nuxt, Blazor, and Eleventy apps, not just sandboxes.

Inspirations

Lily draws patterns and language from a deliberately broad set of design systems:

• NHS UK Design System
• GOV.UK Design System
• U.S. Web Design System (USWDS)
• ONSdigital design system
• Design System AU (Australian Government)
• Mozilla Protocol
• Adobe Spectrum
• Ant Design
• Wonderflow Wanda
• DaisyUI
• shadcn/ui
• Reuters graphics components

License

Lily is multi-licensed under BSD, MIT, Apache-2.0, GPL-2.0, or GPL-3.0. Pick whichever license fits your project. If none of those work, get in touch.

Contact

Project lead: Joel Parker Henderson — joel@joelparkerhenderson.com.

Found a bug, have an idea, want to contribute a component? Open an issue or a pull request on GitHub.