Lily をステップごとに学ぶ
ようこそ！どのチュートリアルもゼロから始めて、アクセシブルでスタイル付きのフォームという同じ小さなものを約 10 分で作ります。 だからフレームワークどうしを同じ条件で比べられます。そのあとは、テーマ設定やユーザー設定へと掘り下げましょう。
始める前に
必要なものは驚くほど少なくて済みます。
- HTML のチュートリアル — ブラウザーとテキストエディターだけです。道具はそれで全部です。
- Svelte、React、Vue、Angular、Nunjucks — git、Node 26、pnpm 10 以降。
- Blazor — git と .NET SDK 8 以降。
ヘッドレスコンポーネントは初めてですか？ここで大丈夫です。どのチュートリアルも進めながら何が起きているかを説明し、 各ステップでコピーできるコードをそのまま示します。
ゼロから公開までの 4 ステップ
- 最初のコンポーネント（約 5 分）— 下からフレームワークを選び、コードを入手して、Button を表示します。
- 組み合わせてスタイルを付ける（約 5 分）— ラベル付きフォームを作り、ケバブケースのクラスフックに沿ってスタイルを付けます （各フレームワークのチュートリアルの一部です）。
- テーマを適用する（約 15 分）— 手書きの CSS を 57 種類のすぐに使えるテーマのどれかに置き換え、 そのあと実行時にユーザーが切り替えられるようにします: テーマ設定のチュートリアル
- 設定を尊重する（約 15 分）— 設定ヘルパーで言語と文字サイズの選択を加えます: ヘルパーのチュートリアル
フレームワークを選ぶ
HTML
クラスフック付きのセマンティックな HTML をコピーして進めます。必要なのはブラウザーとエディターだけです。
Svelte
Svelte 5 のルーン、スニペット、bind:value による双方向バインディング。
React
value + onChange を使う関数コンポーネントと、残りのプロパティの展開。
Vue
v-model に対応した Vue 3 のシングルファイルコンポーネント。
Angular
シグナル入力と [(value)] を使う Angular のスタンドアロンコンポーネント。
Blazor
パラメーター、ChildContent、bUnit テストを備えた Razor コンポーネント。
Nunjucks
Eleventy や、あらゆる Node のテンプレート処理パイプラインに使える、サーバーレンダリングのマクロ。
迷ったら HTML から始めましょう。他のすべてのフレームワークが共有するクラスフックの約束事が身につき、 ファイルから直接実行できます。
さらに深く
テーマ設定
NHS、GOV.UK、USWDS、ライト、ダークなど 57 種類のすぐに使えるテーマのどれかをリンクし、自分の CSS で上書きして、 theme-picker ヘルパーで実行時のテーマ切り替えを加えます。
設定ヘルパー
theme-picker、locale-picker、text-size-picker、motion-picker、search-picker、link-picker、share-picker、date-time-picker で、 テーマ、言語、文字サイズ、モーション、検索、ページリンク、共有、日時入力をユーザーが操作できるようにします。 永続化、SSR への対応、RTL の自動検出を備えたヘッドレスのコントロールです。
チュートリアルのあとは
- コンポーネントカタログを見てみましょう。すべてのコンポーネントに、プロパティ、ARIA の約束事、キーボード操作が文書化されています。
- サンプルアプリをクローンして、571 個すべてのコンポーネントがスタイル付きで連携する様子を見てください。 CSS は先ほど使ったクラスフックと同じものを対象にしているので、どの部分でもプロジェクトにコピーして、好きなように調整できます。
- ご質問は？ヘルプのページに、回答、FAQ、親切な人間に連絡する方法があります。チュートリアルをもっと分かりやすくできそうなら、 ぜひ教えてください。喜んで改善します。