Tutorials
Learn Lily, step by step
Welcome! Every tutorial starts from scratch and builds the same small thing — an accessible, styled form — in about 10 minutes, so you can compare frameworks apples-to-apples. Then go deeper with theming and user preferences.
Before you start
You need surprisingly little:
- For the HTML tutorial — just a browser and a text editor. That's the entire toolkit.
- For Svelte, React, Vue, Angular, or Nunjucks — git, Node 22 or later, and pnpm 10 or later.
- For Blazor — git and the .NET SDK 8 or later.
New to headless components? You're in the right place — each tutorial explains what's happening as you go, and every step shows the exact code to copy.
The learning path
Four steps from zero to shipped
- Your first component (~5 minutes) — pick your framework below, get the code, and render a Button.
- Compose and style (~5 minutes) — build a labelled form and style it against the kebab-case class hooks (part of each framework tutorial).
- Theme it (~15 minutes) — swap your hand-written CSS for one of the 45 ready-made themes, then let users switch at runtime: theming tutorial.
- Respect preferences (~15 minutes) — add language and text-size selection with the preference helpers: helpers tutorial.
Steps 1 and 2
Pick your framework
HTML
Copy semantic HTML with the class hooks and go — a browser and an editor are all it takes.
Svelte
Svelte 5 runes, snippets, and bind:value two-way binding.
React
Function components with value + onChange and rest-prop spread.
Vue
Vue 3 single-file components with v-model support.
Angular
Angular 20 standalone components with signal inputs and [(value)].
Blazor
Razor components with parameters, ChildContent, and bUnit tests.
Nunjucks
Server-rendered macros for Eleventy and any Node templating pipeline.
Torn between them? Start with HTML — it teaches the class-hook contract every other framework shares, and it runs straight from a file.
Steps 3 and 4
Go deeper
Theming
Link one of 45 ready-made themes — NHS, GOV.UK, USWDS, light, dark, and more — override it with your own CSS, and add runtime theme switching with the theme-select helper.
Preference helpers
Give users control of language and text size with locale-select and text-size-select: native selects with persistence, SSR safety, and automatic RTL detection.
After the tutorials
- Browse the component catalog — every component documents its props, ARIA contract, and keyboard behaviour.
- Clone an example app to see all 490 components styled and working together — the CSS targets the same class hooks you just used, so copy any of it into your project and adjust it as you wish.
- Questions? The help page has answers, an FAQ, and ways to reach a friendly human. And if a tutorial could be clearer, tell us — we'll gladly improve it.