Lily в настоящих приложениях
Семь рабочих проектов показывают, как взять headless-компоненты, добавить оформление и выпустить настоящий сайт. Выберите свой фреймворк.
Демонстрационные приложения с полным CSS и маршрутизацией
HTML JavaScript
Простые HTML-страницы, чистый JavaScript, никаких инструментов сборки. Работает на любом статическом хостинге — идеально для небольших сайтов и прогрессивного улучшения.
Svelte + SvelteKit
Приложение SvelteKit 3 на рунах Svelte 5. Маршруты компонентов, файловая маршрутизация и оформленный storybook каждого компонента.
React + Next.js
Приложение Next.js 16, показывающее каждый компонент в контексте, с TypeScript повсюду и демо-страницами составных паттернов.
Vue + Nuxt.js
Приложение Nuxt 4. <script setup> и Composition API на каждом демонстрационном маршруте.
Angular + Analog
Приложение Angular 22 + Analog.js. Файловая маршрутизация, сигналы, обнаружение изменений без zone и полная предварительная отрисовка SSG.
Blazor Web
Приложение Blazor Web с компонентами Razor. Подходит и для сервера, и для WebAssembly, на базе .NET 10.
Nunjucks + Eleventy
Сайт на Eleventy с макросами Nunjucks. Идеален для статических сайтов с большим объёмом контента, которым всё же нужна настоящая система компонентов.
У всех примеров приложений одна и та же структура
Чтобы переход между фреймворками казался привычным, каждое приложение-пример предоставляет:
- Приветственный маршрут
/, представляющий проект. - Индекс компонентов по адресу
/componentsсо списком всех компонентов. - Демонстрационную страницу для каждого компонента по адресу
/components/<component>. - Настоящий CSS, а не абстрактные дизайн-токены, чтобы вы могли напрямую подглядеть стили.
- Работающую из коробки навигацию с клавиатуры и управление фокусом.
Нужно увидеть, как оформлен один компонент?
Откройте нужное приложение-пример, перейдите на /components/<name> и скопируйте разметку и CSS в свой проект. Приложения-примеры намеренно используют простой (или почти простой) CSS, чтобы вы могли адаптировать их к любой системе.
Нужен именно headless?
Сочетайте любое приложение-пример с соответствующим headless-пакетом — он публикует те же компоненты вообще без CSS, готовые к вашим собственным дизайн-токенам.