How the pieces fit
Lily is a stack of layers. Each owns one job and nothing else, so you can adopt one without the others.
The layers
- Catalog — 571 named components in
components.tsv, each with a slug, a root HTML element, ARIA and a keyboard contract. It is the shared vocabulary every other layer is built from. Reach for it to learn what exists and what it is called. - Headless — the catalog as unstyled, accessible components in your framework: HTML, Svelte, React, Vue, Angular, Blazor, Nunjucks, Web Components and Alpine.js. It owns semantic markup, ARIA, focus and keyboard behaviour; it owns no colour, spacing or text. Reach for it when you build your own interface.
- Helpers — packages that each own one whole interaction:
the pickers (theme, locale, text size, motion, share, search, links,
menu, settings, date and time),
picker-bar, and the data grid, kanban board, calendar, Gantt chart and filter. Reach for a helper when the interaction is the product, not just a part. - Themes — 57 plain stylesheets that dress the class hooks. Reach for one to see the components styled, or as the start of your own.
- Examples — complete styled apps, one per framework, with a live page for every component. Reach for them to see the system working end to end before you commit.
- Skills — instructions for AI coding agents, one set per framework layer. Reach for them when an agent writes the code.
Which one do I need?
- I want to try it: open an example.
- I am building an interface: use the headless package for my framework, then a theme or my own CSS.
- I need a date field, a language switch or a data grid: use that helper.
- I want an agent to write it: install the skill for my framework.
The rules each layer follows are in the specification.