実際のアプリで Lily を見る
7 つの動作するサンプルプロジェクトで、ヘッドレスコンポーネントにスタイルを重ね、実際のウェブサイトとして公開するまでの流れを紹介します。 お使いのフレームワークを選んでください。
完全な CSS とルーティングを備えたデモアプリ
HTML JavaScript
素の HTML ページとバニラ JavaScript で、ビルドツールは不要です。どんな静的ホストにも置けるので、小さなサイトやプログレッシブエンハンスメントに最適です。
Svelte + SvelteKit
Svelte 5 のルーンを使う SvelteKit 3 アプリ。コンポーネントのルート、ファイルベースのルーティング、全コンポーネントのスタイル付き Storybook があります。
React + Next.js
各コンポーネントを文脈の中で示す Next.js 16 アプリ。全体が TypeScript で、複合パターンのデモページもあります。
Vue + Nuxt.js
Nuxt 4 アプリ。すべてのデモルートで <script setup> と Composition API を使っています。
Angular + Analog
Angular 22 + Analog.js アプリ。ファイルベースのルーティング、シグナル、ゾーンレスの変更検知、完全な SSG プリレンダリング。
Blazor Web
Razor コンポーネントを使う Blazor Web アプリ。サーバーにも WebAssembly にも対応し、.NET 10 を基準にしています。
Nunjucks + Eleventy
Nunjucks のマクロを使う Eleventy サイト。コンテンツが多い静的サイトでありながら、本格的なコンポーネントシステムが欲しい場合に最適です。
どのサンプルアプリも同じ構成です
フレームワークを渡り歩いても違和感がないよう、どのサンプルアプリにも次のものがあります。
- プロジェクトを紹介する、
/のウェルカムルート。 - すべてのコンポーネントを一覧にする、
/componentsのコンポーネント索引。 - コンポーネントごとのデモページ、
/components/<component>。 - 抽象的なデザイントークンではない実際の CSS。そのままスタイルを拝借できます。
- 最初から動作するキーボード操作とフォーカス管理。
1 つのコンポーネントのスタイルを知りたいときは？
該当するサンプルアプリを開き、/components/<name> に移動して、マークアップと CSS を自分のプロジェクトにコピーしてください。
サンプルアプリは意図的に素の CSS（またはそれに近いもの）を使っているので、お好みのどんなシステムにも合わせられます。
ヘッドレスのほうが良いですか？
どのサンプルアプリも、対応するヘッドレスパッケージと組み合わせられます。そちらは同じコンポーネントを CSS なしで公開しており、 あなた自身のデザイントークンをそのまま使えます。