喺真實應用程式入面睇 Lily
七個完整範例項目示範點樣取用無頭元件、加上樣式,同發佈真正嘅網站。揀你用緊嘅框架。
具備完整 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> 同 Composition API,貫穿每個示範路由。
Angular + Analog
Angular 22 + Analog.js 應用程式。檔案式路由、signals、無 zone 變更偵測,同完整 SSG 預渲染。
Blazor Web
帶有 Razor 元件嘅 Blazor Web 應用程式。對伺服器同 WebAssembly 都友善,以 .NET 10 為基線。
Nunjucks + Eleventy
使用 Nunjucks 巨集嘅 Eleventy 網站。非常適合內容豐富但仍然想要真正元件系統嘅靜態網站。
每個範例應用程式都有相同嘅形狀
為咗令框架之間嘅跳轉感覺熟悉,每個範例應用程式都提供:
- 一個歡迎路由,位於
/介紹項目。 - 一個元件索引,位於
/components列出每個元件。 - 每個元件一個示範頁面,位於
/components/<component>. - 真實 CSS — 唔係抽象嘅設計令牌 — 等你可以直接抄樣式。
- 開箱即用嘅鍵盤導覽同焦點管理。
需要睇一個元件點樣加樣式?
打開相關嘅範例應用程式,前往
/components/<name>,然後將標記同 CSS 複製入你自己嘅項目。範例應用程式特意使用普通 CSS(或者近乎普通),等你可以調整去配合任何你鍾意嘅系統。
想要無頭多啲?
將任何範例應用程式同對應嘅 無頭 套件配對 — 佢哋發佈同樣嘅元件,完全冇 CSS,準備好畀你自己嘅設計令牌。