Learn Lily small small, step by step
Welcome! Every tutorial start from scratch and build di same small thing — accessible, styled form — for about 10 minutes, so you fit compare frameworks fair and square. Then go deeper with theming and user preferences.
Before you start
You need very small tins:
- For di HTML tutorial — just browser and text editor. Na all di toolkit be dat.
- For Svelte, React, Vue, Angular, abi Nunjucks — git, Node 26, and pnpm 10 or newer one.
- For Blazor — git and di .NET SDK 8 or later.
You new to headless components? You don reach di right place — each tutorial dey explain wetin dey happen as you dey go, and every step show di exact code to copy.
Four steps wey go take you from zero reach shipping
- Your first component (~5 minutes) — pick your framework below, get di code, and render Button.
- Compose and style (~5 minutes) — build labelled form and style am against di kebab-case class hooks (part of each framework tutorial).
- Theme am (~15 minutes) — swap your hand-written CSS for one of di 57 ready-made themes, then let users switch for runtime: theming tutorial.
- Respect preferences (~15 minutes) — add language and text-size selection with di preference helpers: helpers tutorial.
Pick your framework
HTML
Copy semantic HTML with di class hooks and go — browser and editor na all e take.
Svelte
Svelte 5 runes, snippets, plus bind:value two-way binding.
React
Function components wey get value + onChange and rest-prop spread.
Vue
Vue 3 single-file components wey get v-model support.
Angular
Angular standalone components wey dey use signal inputs and [(value)].
Blazor
Razor components wey get parameters, ChildContent, and bUnit tests.
Nunjucks
Macros wey server dey render for Eleventy and any Node templating pipeline wey you get.
You dey confuse between dem? Start with HTML — e teach di class-hook contract wey every other framework share, and e dey run straight from file.
Go deeper
Theming
Link one of 57 ready-made themes — NHS, GOV.UK, USWDS, light, dark, and more — override am with your own CSS, and add runtime theme switching with di theme-picker helper.
Preference helpers
Give users power to control theme, language, text size, motion, search, page links, sharing, and date/time entry with theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, and date-time-picker: headless controls wey get persistence, SSR safety, and automatic RTL detection.
After di tutorials
- Browse di component catalog — every component dey document im props, ARIA contract, and keyboard behaviour.
- Clone an example app to see all 571 components styled and dey work together — di CSS dey target di same class hooks wey you just use, so copy any part of am enter your project and adjust am as you like.
- Questions? Di help page get answers, FAQ, and ways to reach friendly human. And if tutorial fit clearer, tell us — we go gladly improve am.