Lär dig Lily, steg för steg
Välkommen! Varje handledning börjar från noll och bygger samma lilla sak – ett tillgängligt, formgivet formulär – på ungefär 10 minuter, så att du kan jämföra ramverk på lika villkor. Gå sedan djupare med teman och användarinställningar.
Innan du börjar
Du behöver förvånansvärt lite:
- För HTML-handledningen – bara en webbläsare och en textredigerare. Det är hela verktygslådan.
- För Svelte, React, Vue, Angular eller Nunjucks — git, Node 26 och pnpm 10 eller senare.
- För Blazor – git och .NET SDK 8 eller senare.
Ny med huvudlösa komponenter? Då är du på rätt plats – varje handledning förklarar vad som händer medan du går, och varje steg visar exakt den kod du ska kopiera.
Fyra steg från noll till leverans
- Din första komponent (ca 5 minuter) – välj ramverk nedan, hämta koden och rendera en Button.
- Sätt ihop och formge (ca 5 minuter) – bygg ett formulär med etiketter och formge det mot klasskrokarna i kebab-case (en del av varje ramverkshandledning).
- Ge det ett tema (ca 15 minuter) – byt ut din handskrivna CSS mot något av de 57 färdiga temana och låt sedan användare växla vid körning: temahandledningen.
- Respektera inställningar (ca 15 minuter) – lägg till språk- och textstorleksval med inställningshjälparna: hjälparhandledningen.
Välj ramverk
HTML
Kopiera semantisk HTML med klasskrokarna och kör – en webbläsare och en redigerare är allt som krävs.
Svelte
Svelte 5-runor, snippets och bind:value tvåvägsbindning.
React
Funktionskomponenter med value + onChange och spridning av övriga egenskaper.
Vue
Vue 3-enfilskomponenter med stöd för v-model .
Angular
Fristående Angular-komponenter med signalindata och [(value)].
Blazor
Razor-komponenter med parametrar, ChildContentoch bUnit-tester.
Nunjucks
Serverrenderade makron för Eleventy och valfri Node-mallpipeline.
Kan du inte välja? Börja med HTML – den lär ut kontraktet för klasskrokar som alla andra ramverk delar, och den körs direkt från en fil.
Gå djupare
Teman
Länka ett av 57 färdiga teman – NHS, GOV.UK, USWDS, ljust, mörkt och fler – åsidosätt det med din egen CSS och lägg till temabyte vid körning med hjälparen theme-picker.
Inställningshjälpare
Ge användarna kontroll över tema, språk, textstorlek, rörelse, sökning, sidlänkar, delning och inmatning av datum/tid med theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker och date-time-picker: huvudlösa kontroller med beständighet, SSR-säkerhet och automatisk RTL-identifiering.
Efter handledningarna
- Bläddra i komponentkatalogen – varje komponent dokumenterar sina egenskaper, ARIA-kontrakt och tangentbordsbeteende.
- Klona en exempelapp för att se alla 571 komponenter formgivna och fungera tillsammans – CSS:en riktar sig mot samma klasskrokar som du just använde, så kopiera vad du vill till ditt projekt och justera det som du önskar.
- Frågor? Hjälpsidan har svar, vanliga frågor och sätt att nå en vänlig människa. Och om en handledning kunde vara tydligare, berätta för oss – vi förbättrar den gärna.