Pelajari Lily, selangkah demi selangkah

Selamat datang! Setiap tutorial dimulai dari nol dan membangun hal kecil yang sama — formulir yang aksesibel dan bertata — dalam sekitar 10 menit, sehingga Anda dapat membandingkan framework secara setara. Setelah itu, dalami tema dan preferensi pengguna.

Sebelum memulai

Yang Anda butuhkan ternyata sedikit sekali:

Untuk tutorial HTML — cukup peramban dan penyunting teks. Itulah seluruh perangkatnya.
Untuk Svelte, React, Vue, Angular, atau Nunjucks — git, Node 26, dan pnpm 10 atau lebih baru.
Untuk Blazor — git dan SDK .NET 8 atau lebih baru.

Baru mengenal komponen headless? Anda berada di tempat yang tepat — setiap tutorial menjelaskan apa yang terjadi selama berjalan, dan setiap langkah menunjukkan kode persis yang perlu disalin.

Empat langkah dari nol hingga rilis

Komponen pertama Anda (~5 menit) — pilih framework Anda di bawah, ambil kodenya, dan render sebuah tombol.
Susun dan tata (~5 menit) — bangun formulir berlabel dan tata dengan kelas pengait kebab-case (bagian dari setiap tutorial framework).
Beri tema (~15 menit) — ganti CSS tulisan tangan Anda dengan salah satu dari 45 tema siap pakai, lalu biarkan pengguna beralih saat runtime: tutorial tema.
Hormati preferensi (~15 menit) — tambahkan pilihan bahasa dan ukuran teks dengan asisten preferensi: tutorial asisten.

Pilih framework Anda

HTML

Salin HTML semantik dengan kelas pengaitnya dan mulai — cukup peramban dan penyunting.

~10 menit · awal yang paling mudah

Svelte

Rune Svelte 5, snippet, dan pengikatan dua arah bind:value.

~10 menit

React

Komponen fungsi dengan value + onChange dan penyebaran properti sisa.

~10 menit

Vue

Komponen berkas tunggal Vue 3 dengan dukungan v-model.

~10 menit

Angular

Komponen standalone Angular dengan input signal dan [(value)].

~10 menit

Blazor

Komponen Razor dengan parameter, ChildContent, dan pengujian bUnit.

~10 menit

Nunjucks

Makro yang dirender di server untuk Eleventy dan alur templat Node apa pun.

~10 menit

Bingung memilih? Mulailah dengan HTML — tutorial ini mengajarkan kontrak kelas pengait yang dipakai bersama oleh semua framework lain, dan dapat dijalankan langsung dari berkas.

Lebih dalam

Tema

Tautkan salah satu dari 45 tema siap pakai — NHS, GOV.UK, USWDS, terang, gelap, dan lainnya — timpa dengan CSS Anda sendiri, dan tambahkan pergantian tema saat runtime dengan asisten theme-picker.

~15 menit

Asisten preferensi

Beri pengguna kendali atas tema, bahasa, ukuran teks, gerak, pencarian, tautan halaman, berbagi, dan input tanggal/waktu dengan theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker, dan date-time-picker: kontrol headless dengan persistensi, keamanan SSR, dan deteksi otomatis tulisan kanan-ke-kiri.

~15 menit

Setelah tutorial

Jelajahi katalog komponen — setiap komponen mendokumentasikan properti, kontrak ARIA, dan perilaku papan ketiknya.
Klon sebuah aplikasi contoh untuk melihat ke-571 komponen bertata dan bekerja bersama — CSS-nya menargetkan kelas pengait yang sama dengan yang baru Anda gunakan, jadi salin bagian mana pun ke proyek Anda dan sesuaikan sesuka Anda.
Ada pertanyaan? Halaman bantuan memuat jawaban, FAQ, dan cara menghubungi orang yang ramah. Dan jika ada tutorial yang bisa lebih jelas, beri tahu kami — kami akan dengan senang hati memperbaikinya.