在真实应用中看 Lily
七个可运行个示例项目展示如何拿起 headless 组件、叠加样式并发布一个真正个网站。选择侬使用个框架。
带完整 CSS 搭路由个演示应用
HTML JavaScript
纯 HTML 页面、原生 JavaScript、无需构建工具。可部署在任何静态主机上——交关适合小型网站搭渐进增强。
Svelte + SvelteKit
使用 Svelte 5 runes 个 SvelteKit 3 应用。组件路由、基于文件个路由，以及每个组件带样式个 storybook。
React + Next.js
在上下文中展示每个组件个 Next.js 16 应用，全程使用 TypeScript，并有复合模式个演示页面。
Vue + Nuxt.js
Nuxt 4 应用。每个演示路由侪使用 <script setup> 搭组合式 API。
Angular + Analog
Angular 22 + Analog.js 应用。基于文件个路由、信号、无 zone 个变更检测，以及完整个 SSG 预渲染。
Blazor Web
带 Razor 组件个 Blazor Web 应用。同时适合服务器搭 WebAssembly，以 .NET 10 为基线。
Nunjucks + Eleventy
使用 Nunjucks 宏个 Eleventy 网站。适合内容丰富、同时仍想要真正组件系统个静态网站。
每个示例应用个结构侪相同
为了让在框架之间切换感觉熟悉，每个示例应用侪提供：
- 位于
/个欢迎路由，用来介绍本项目。 - 位于
/components个组件索引，列出每一个组件。 - 位于
/components/<component>个每个组件一页个演示页面。 - 真实个 CSS——而不是抽象个设计令牌——方便侬直接借鉴样式。
- 开箱即用个键盘导航搭焦点管理。
想看某一个组件是哪能设置样式个？
打开相应个示例应用，进入 /components/<name>，把标记搭 CSS 复制到侬自己个项目里。示例应用刻意使用朴素（或接近朴素）个 CSS，方便侬适配到任何侬偏好个体系。
想要 headless 版本？
把任一示例应用与其对应个 headless 包搭配——伊拉发布同样个组件，但完全勿带 CSS，随时可接上侬自己个设计令牌。