Pelajari Lily, langkah demi langkah

Selamat datang! Setiap tutorial bermula dari kosong dan membina perkara kecil yang sama — borang yang mudah diakses dan digayakan — dalam kira-kira 10 minit, supaya anda boleh membandingkan rangka kerja secara adil. Kemudian pergi lebih mendalam dengan tema dan keutamaan pengguna.

Sebelum anda bermula

Anda memerlukan sangat sedikit:

Untuk tutorial HTML — hanya pelayar dan penyunting teks. Itulah keseluruhan perkakasnya.
Untuk Svelte, React, Vue, Angular atau Nunjucks — git, Node 26 dan pnpm 10 atau lebih baharu.
Untuk Blazor — git dan .NET SDK 8 atau lebih baharu.

Baharu dengan komponen tanpa kepala? Anda di tempat yang betul — setiap tutorial menerangkan apa yang berlaku semasa anda maju, dan setiap langkah menunjukkan kod tepat untuk disalin.

Empat langkah dari sifar hingga dilancarkan

Komponen pertama anda (~5 minit) — pilih rangka kerja anda di bawah, dapatkan kod, dan paparkan Button.
Gubah dan gayakan (~5 minit) — bina borang berlabel dan gayakannya berdasarkan cangkuk kelas kebab-case (sebahagian daripada setiap tutorial rangka kerja).
Letakkan tema (~15 minit) — gantikan CSS tulisan tangan anda dengan salah satu daripada 57 tema siap pakai, kemudian biarkan pengguna menukar semasa runtime: tutorial tema.
Hormati keutamaan (~15 minit) — tambah pemilihan bahasa dan saiz teks dengan pembantu keutamaan: tutorial pembantu.

Pilih rangka kerja anda

HTML

Salin HTML semantik dengan cangkuk kelas dan teruskan — pelayar dan penyunting sudah memadai.

~10 minit · permulaan paling mudah

Svelte

Runes Svelte 5, snippets, dan bind:value pengikatan dua hala.

~10 minit

React

Komponen fungsi dengan value + onChange dan taburan rest-prop.

~10 minit

Vue

Komponen fail tunggal Vue 3 dengan sokongan v-model .

~10 minit

Angular

Komponen kendiri Angular dengan input isyarat dan [(value)].

~10 minit

Blazor

Komponen Razor dengan parameter, ChildContent, dan ujian bUnit.

~10 minit

Nunjucks

Makro dirender pelayan untuk Eleventy dan sebarang saluran templat Node.

~10 minit

Sukar memilih? Mulakan dengan HTML — ia mengajar kontrak cangkuk kelas yang dikongsi setiap rangka kerja lain, dan ia berjalan terus daripada fail.

Pergi lebih mendalam

Tema

Pautkan salah satu daripada 57 tema siap pakai — NHS, GOV.UK, USWDS, cerah, gelap dan banyak lagi — atasinya dengan CSS anda sendiri, dan tambah penukaran tema runtime dengan pembantu theme-picker.

~15 minit

Pembantu keutamaan

Beri pengguna kawalan tema, bahasa, saiz teks, gerakan, carian, pautan halaman, perkongsian dan kemasukan tarikh/masa dengan theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker dan date-time-picker: kawalan tanpa kepala dengan kegigihan, keselamatan SSR dan pengesanan RTL automatik.

~15 minit

Selepas tutorial

Layari katalog komponen — setiap komponen mendokumenkan prop, kontrak ARIA dan tingkah laku papan kekunci.
Klon aplikasi contoh untuk melihat kesemua 571 komponen digayakan dan berfungsi bersama — CSS menyasarkan cangkuk kelas yang sama seperti yang baru anda gunakan, jadi salin mana-mana bahagiannya ke projek anda dan ubah suai sesuka hati.
Soalan? halaman bantuan mempunyai jawapan, FAQ dan cara untuk menghubungi manusia yang mesra. Dan jika tutorial boleh dijelaskan lagi, beritahu kami — kami dengan senang hati akan memperbaikinya.