Xem Lily trong ứng dụng thực tế
Bảy dự án ví dụ hoàn chỉnh cho thấy cách lấy các thành phần headless, thêm kiểu và phát hành một website thật. Hãy chọn framework bạn dùng.
Ứng dụng demo với CSS đầy đủ và định tuyến
HTML JavaScript
Trang HTML thuần, JavaScript thuần, không có công cụ build. Đặt được trên mọi máy chủ tĩnh — hoàn hảo cho các trang nhỏ và cải tiến lũy tiến.
Svelte + SvelteKit
Ứng dụng SvelteKit 3 dùng rune của Svelte 5. Các tuyến thành phần, định tuyến theo tệp và một storybook có kiểu cho mọi thành phần.
React + Next.js
Ứng dụng Next.js 16 trình bày từng thành phần trong ngữ cảnh, dùng TypeScript xuyên suốt và có trang demo cho các mẫu ghép.
Vue + Nuxt.js
Ứng dụng Nuxt 4. <script setup> và Composition API trên mọi tuyến demo.
Angular + Analog
Ứng dụng Angular 22 + Analog.js. Định tuyến theo tệp, signal, phát hiện thay đổi không zone và kết xuất trước SSG đầy đủ.
Blazor Web
Ứng dụng Blazor Web với các thành phần Razor. Thân thiện với cả máy chủ và WebAssembly, lấy .NET 10 làm nền.
Nunjucks + Eleventy
Trang Eleventy dùng macro Nunjucks. Lý tưởng cho các trang tĩnh nhiều nội dung mà vẫn muốn có hệ thống thành phần thực thụ.
Mọi ứng dụng ví dụ đều có cùng hình dạng
Để việc chuyển qua lại giữa các framework quen thuộc, mỗi ứng dụng ví dụ cung cấp:
- Một tuyến chào mừng tại
/giới thiệu dự án. - Một chỉ mục thành phần tại
/componentsliệt kê mọi thành phần. - Một trang demo cho mỗi thành phần tại
/components/<component>. - CSS thật — không phải token thiết kế trừu tượng — để bạn có thể lấy kiểu trực tiếp.
- Điều hướng bằng bàn phím và quản lý tiêu điểm hoạt động ngay từ đầu.
Cần xem một thành phần đơn lẻ được tạo kiểu thế nào?
Mở ứng dụng ví dụ tương ứng, điều hướng tới
/components/<name>và sao chép mã đánh dấu cùng CSS vào dự án của bạn. Các ứng dụng ví dụ cố ý dùng CSS thuần (hoặc gần thuần) để bạn có thể điều chỉnh cho bất kỳ hệ thống nào bạn thích.
Muốn headless hơn?
Ghép bất kỳ ứng dụng ví dụ nào với gói headless tương ứng — chúng phát hành cùng các thành phần mà không có CSS nào, sẵn sàng cho token thiết kế của riêng bạn.