Lær Lily, steg for steg

Velkommen! Hver veiledning starter fra bunnen av og bygger den samme lille tingen — et tilgjengelig, stilet skjema — på omtrent 10 minutter, slik at du kan sammenligne rammeverk på lik linje. Gå deretter dypere med tema og brukerpreferanser.

Før du begynner

Du trenger overraskende lite:

For HTML-veiledningen — bare en nettleser og et tekstredigeringsprogram. Det er hele verktøykassen.
For Svelte, React, Vue, Angular eller Nunjucks — git, Node 26 og pnpm 10 eller nyere.
For Blazor — git og .NET SDK 8 eller nyere.

Ny til hodeløse komponenter? Du er på rett sted — hver veiledning forklarer hva som skjer underveis, og hvert steg viser nøyaktig kode som kan kopieres.

Fire steg fra null til levert

Din første komponent (~5 minutter) — velg rammeverket ditt nedenfor, hent koden og gjengi en Button.
Sett sammen og stil (~5 minutter) — bygg et skjema med etiketter og stil det mot kebab-case-klassekrokene (del av hver rammeverksveiledning).
Gi det et tema (~15 minutter) — bytt ut den håndskrevne CSS-en din med ett av de 57 ferdige temaene, og la deretter brukerne bytte ved kjøretid: temaveiledning.
Respekter preferanser (~15 minutter) — legg til valg av språk og tekststørrelse med preferansehjelperne: hjelperveiledning.

Velg rammeverk

HTML

Kopier semantisk HTML med klassekrokene og kom i gang — en nettleser og et redigeringsprogram er alt som trengs.

~10 minutter · enkleste start

Svelte

Svelte 5 runes, snippets og bind:value toveis binding.

~10 minutter

React

Funksjonskomponenter med value + onChange og rest-prop-spredning.

~10 minutter

Vue

Vue 3 enkeltfilkomponenter med v-model -støtte.

~10 minutter

Angular

Frittstående Angular-komponenter med signal-inndata og [(value)].

~10 minutter

Blazor

Razor-komponenter med parametere, ChildContentog bUnit-tester.

~10 minutter

Nunjucks

Server-gjengitte makroer for Eleventy og enhver Node-malrørledning.

~10 minutter

Usikker? Start med HTML — den lærer klassekrokkontrakten som alle andre rammeverk deler, og den kjører rett fra en fil.

Gå dypere

Tema

Lenk til ett av 57 ferdige temaer — NHS, GOV.UK, USWDS, lys, mørk og flere — overstyr det med din egen CSS, og legg til temabytte ved kjøretid med theme-picker-hjelperen.

~15 minutter

Preferansehjelpere

Gi brukerne kontroll over tema, språk, tekststørrelse, bevegelse, søk, sidelenker, deling og dato-/tidsinntasting med theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker og date-time-picker: hodeløse kontroller med persistens, SSR-sikkerhet og automatisk RTL-gjenkjenning.

~15 minutter

Etter veiledningene

Bla gjennom komponentkatalogen — hver komponent dokumenterer sine egenskaper, ARIA-kontrakt og tastaturoppførsel.
Klon en eksempelapp for å se alle 571 komponentene stilet og i samspill — CSS-en retter seg mot de samme klassekrokene du nettopp brukte, så kopier hvilken som helst del inn i prosjektet ditt og juster som du vil.
Spørsmål? hjelpesiden har svar, vanlige spørsmål og måter å nå et vennlig menneske på. Og hvis en veiledning kan bli tydeligere, fortell oss — vi forbedrer den gjerne.