Leer Lily, stap voor stap
Welkom! Elke handleiding begint bij nul en bouwt hetzelfde kleine ding – een toegankelijk, opgemaakt formulier – in zo'n 10 minuten, zodat je frameworks eerlijk kunt vergelijken. Ga daarna dieper met thema's en gebruikersvoorkeuren.
Voordat je begint
Je hebt verrassend weinig nodig:
- Voor de HTML-handleiding – alleen een browser en een teksteditor. Dat is de hele gereedschapskist.
- Voor Svelte, React, Vue, Angular of Nunjucks — git, Node 26 en pnpm 10 of nieuwer.
- Voor Blazor – git en de .NET SDK 8 of nieuwer.
Nieuw met headless componenten? Dan ben je hier goed – elke handleiding legt uit wat er gebeurt terwijl je bezig bent, en elke stap toont de exacte code om te kopiëren.
Vier stappen van nul naar live
- Je eerste component (~5 minuten) – kies hieronder je framework, haal de code op en render een Button.
- Samenstellen en opmaken (~5 minuten) – bouw een formulier met labels en maak het op via de kebab-case klassenhaken (onderdeel van elke frameworkhandleiding).
- Geef het een thema (~15 minuten) – ruil je zelfgeschreven CSS in voor een van de 57 kant-en-klare thema's en laat gebruikers dan tijdens runtime wisselen: themahandleiding.
- Respecteer voorkeuren (~15 minuten) – voeg taal- en tekstgrootteselectie toe met de voorkeurshelpers: helperhandleiding.
Kies je framework
HTML
Kopieer semantische HTML met de klassenhaken en ga – een browser en een editor is alles wat je nodig hebt.
Svelte
Svelte 5-runes, snippets en bind:value tweerichtingsbinding.
React
Functiecomponenten met value + onChange en doorgifte van overige props.
Vue
Vue 3-componenten in één bestand met ondersteuning voor v-model .
Angular
Zelfstandige Angular-componenten met signal-invoer en [(value)].
Blazor
Razor-componenten met parameters, ChildContenten bUnit-tests.
Nunjucks
Server-gerenderde macro's voor Eleventy en elke Node-templatepipeline.
Twijfel je? Begin met HTML – het leert het contract van klassenhaken dat elk ander framework deelt, en het draait rechtstreeks vanuit een bestand.
Ga dieper
Thema's
Koppel een van de 57 kant-en-klare thema's – NHS, GOV.UK, USWDS, licht, donker en meer – overschrijf het met je eigen CSS en voeg themawissel tijdens runtime toe met de theme-picker-helper.
Voorkeurshelpers
Geef gebruikers controle over thema, taal, tekstgrootte, beweging, zoeken, paginalinks, delen en invoer van datum/tijd met theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker en date-time-picker: headless besturingselementen met persistentie, SSR-veiligheid en automatische RTL-detectie.
Na de handleidingen
- Blader door de componentencatalogus – elke component documenteert zijn props, ARIA-contract en toetsenbordgedrag.
- Kloon een voorbeeldapp om alle 571 componenten opgemaakt en samenwerkend te zien – de CSS richt zich op dezelfde klassenhaken die je zojuist gebruikte, dus kopieer wat je wilt naar je project en pas het aan zoals je wilt.
- Vragen? De helppagina heeft antwoorden, een FAQ en manieren om een vriendelijk mens te bereiken. En als een handleiding duidelijker kan, laat het ons weten – we verbeteren hem graag.