在真实应用中看 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，随时可接上你自己的设计令牌。