Побачте Lily в реальних застосунках
Сім робочих прикладних проєктів показують, як узяти «безголові» компоненти, додати стилізацію та випустити справжній вебсайт. Оберіть фреймворк, яким ви користуєтеся.
Демозастосунки з повним CSS і маршрутизацією
HTML JavaScript
Прості HTML-сторінки, ванільний JavaScript, жодних інструментів збирання. Підходить для будь-якого статичного хостингу — ідеально для невеликих сайтів і прогресивного вдосконалення.
Svelte + SvelteKit
Застосунок SvelteKit 3 на runes 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. Файлова маршрутизація, сигнали, виявлення змін без зон і повний SSG-пререндеринг.
Blazor Web
Застосунок Blazor Web з компонентами Razor. Дружній до сервера та WebAssembly, з базою .NET 10.
Nunjucks + Eleventy
Сайт Eleventy з макросами Nunjucks. Ідеально для статичних сайтів із великою кількістю контенту, яким усе ж потрібна справжня система компонентів.
Кожен приклад застосунку має однакову форму
Щоб перехід між фреймворками здавався знайомим, кожен приклад застосунку містить:
- Вітальний маршрут за адресою
/що знайомить із проєктом. - Індекс компонентів за адресою
/componentsщо перелічує кожен компонент. - Демосторінку для кожного компонента за адресою
/components/<component>. - Справжній CSS — не абстрактні дизайн-токени — щоб ви могли переймати стилі безпосередньо.
- Робочу навігацію клавіатурою та керування фокусом «з коробки».
Потрібно побачити, як стилізовано один компонент?
Відкрийте відповідний приклад застосунку, перейдіть до
/components/<name>і скопіюйте розмітку та CSS у свій проєкт. Приклади застосунків навмисно використовують звичайний CSS (або майже звичайний), щоб ви могли адаптувати їх до будь-якої системи на ваш смак.
Хочете «безголове» натомість?
Поєднайте будь-який приклад застосунку з відповідним «безголовим» пакетом — вони публікують ті самі компоненти без жодного CSS, готові до ваших власних дизайн-токенів.