Impara Lily, passo dopo passo
Benvenuto! Ogni tutorial parte da zero e costruisce la stessa piccola cosa – un modulo accessibile e con stili – in circa 10 minuti, così puoi confrontare i framework alla pari. Poi vai più a fondo con i temi e le preferenze dell'utente.
Prima di iniziare
Serve sorprendentemente poco:
- Per il tutorial HTML – solo un browser e un editor di testo. È l'intera cassetta degli attrezzi.
- Per Svelte, React, Vue, Angular o Nunjucks — git, Node 26 e pnpm 10 o successivi.
- Per Blazor – git e il .NET SDK 8 o successivo.
Sei nuovo ai componenti headless? Sei nel posto giusto – ogni tutorial spiega cosa accade man mano che procedi, e ogni passaggio mostra il codice esatto da copiare.
Quattro passi da zero alla pubblicazione
- Il tuo primo componente (~5 minuti) – scegli il tuo framework qui sotto, ottieni il codice e visualizza un Button.
- Componi e applica gli stili (~5 minuti) – costruisci un modulo con etichette e applica gli stili tramite gli hook di classe in kebab-case (parte di ogni tutorial di framework).
- Applica un tema (~15 minuti) – sostituisci il tuo CSS scritto a mano con uno dei 57 temi pronti, poi lascia che gli utenti cambino a runtime: tutorial sui temi.
- Rispetta le preferenze (~15 minuti) – aggiungi la scelta di lingua e dimensione del testo con gli helper per le preferenze: tutorial sugli helper.
Scegli il tuo framework
HTML
Copia l'HTML semantico con gli hook di classe e parti – bastano un browser e un editor.
Svelte
Rune di Svelte 5, snippet e associazione bidirezionale con bind:value .
React
Componenti funzione con value + onChange e diffusione delle prop rimanenti.
Vue
Componenti a file singolo di Vue 3 con supporto a v-model .
Angular
Componenti standalone di Angular con input a signal e [(value)].
Blazor
Componenti Razor con parametri, ChildContente test bUnit.
Nunjucks
Macro renderizzate lato server per Eleventy e qualsiasi pipeline di template Node.
Indeciso? Inizia con HTML – insegna il contratto degli hook di classe che ogni altro framework condivide e funziona direttamente da un file.
Vai più a fondo
Temi
Collega uno dei 57 temi pronti – NHS, GOV.UK, USWDS, chiaro, scuro e altri – sovrascrivilo con il tuo CSS e aggiungi il cambio di tema a runtime con l'helper theme-picker.
Helper per le preferenze
Dai agli utenti il controllo di tema, lingua, dimensione del testo, movimento, ricerca, link alle pagine, condivisione e inserimento di data/ora con theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker e date-time-picker: controlli headless con persistenza, sicurezza SSR e rilevamento RTL automatico.
Dopo i tutorial
- Sfoglia il catalogo dei componenti – ogni componente documenta le sue prop, il contratto ARIA e il comportamento da tastiera.
- Clona un' app di esempio per vedere tutti i 571 componenti con gli stili e al lavoro insieme – il CSS punta agli stessi hook di classe che hai appena usato, quindi copia qualsiasi parte nel tuo progetto e adattala come preferisci.
- Domande? La pagina di aiuto ha risposte, una FAQ e modi per raggiungere un essere umano gentile. E se un tutorial potesse essere più chiaro, faccelo sapere – lo miglioreremo volentieri.