Lear Lily, stap bi stap

Walcome! Ilka tutorial stairts frae scart an bigs the same wee thing — an accessible, styled form — in aboot 10 minutes, sae ye can compare frameworks apples-tae-apples. Then gang deeper wi theming an uiser preferences.

Afore ye stairt

Ye need surprisingly little:

For the HTML tutorial — juist a browser an a text editor. That's the hail toolkit.
For Svelte, React, Vue, Angular, or Nunjucks — git, Node 26, an pnpm 10 or later.
For Blazor — git an the .NET SDK 8 or later.

New tae headless components? Ye're in the richt place — ilka tutorial explains whit's happenin as ye gang, an ilka step shaws the exact code tae copy.

Fower steps frae zero tae shipped

Yer first component (~5 minutes) — pick yer framework ablow, git the code, an render a Button.
Compose an style (~5 minutes) — big a labelled form an style it against the kebab-case class hooks (pairt o ilka framework tutorial).
Theme it (~15 minutes) — swap yer haund-written CSS for ane o the 57 ready-made themes, then let uisers switch at runtime: theming tutorial.
Respect preferences (~15 minutes) — add leid an text-size selection wi the preference helpers: helpers tutorial.

Pick yer framework

HTML

Copy semantic HTML wi the class hooks an gang — a browser an an editor are aw it taks.

~10 minutes · easiest stairt

Svelte

Svelte 5 runes, snippets, an bind:value two-wey binding.

~10 minutes

React

Function components wi value + onChange an rest-prop spreid.

~10 minutes

Vue

Vue 3 single-file components wi v-model support.

~10 minutes

Angular

Angular standalane components wi signal inputs an [(value)].

~10 minutes

Blazor

Razor components wi parameters, ChildContent, an bUnit tests.

~10 minutes

Nunjucks

Server-rendert macros for Eleventy an onie Node templating pipeline.

~10 minutes

Torn atween them? Stairt wi HTML — it teaches the class-hook contract ilka ither framework shares, an it rins straucht frae a file.

Gang deeper

Theming

Link ane o 57 ready-made themes — NHS, GOV.UK, USWDS, licht, daurk, an mair — owerride it wi yer ain CSS, an add runtime theme switchin wi the theme-picker helper.

~15 minutes

Preference helpers

Gie uisers control o theme, leid, text size, motion, seek, page links, sharin, an date/time entry wi theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, an date-time-picker: headless controls wi persistence, SSR safety, an automatic RTL detection.

~15 minutes

Efter the tutorials

Brouse the component catalog — ilka component documents its props, ARIA contract, an keyboard behaviour.
Clone an example app tae see aw 571 components styled an wirkin thegither — the CSS targets the same class hooks ye juist uised, sae copy onie pairt o it intae yer project an adjust it as ye wish.
Questions? The help page haes answers, an FAQ, an weys tae reach a freendly human. An if a tutorial could be clearer, tell us — we'll gladly improve it.