Вижте Lily в реални приложения

Седем готови примерни проекта показват как да вземете безглавите компоненти, да добавите стилизиране и да пуснете истински уебсайт. Изберете фреймуърка, който използвате.

Демо приложения с пълен CSS и маршрутизиране

HTML JavaScript

Обикновени HTML страници, чист JavaScript, без инструменти за изграждане. Побира се на всеки статичен хост — идеално за малки сайтове и прогресивно подобряване.

→ Вижте в GitHub

Svelte + SvelteKit

Приложение SvelteKit 3 с руни на Svelte 5. Маршрути на компоненти, маршрутизиране по файлове и стилизиран storybook за всеки компонент.

→ Вижте в GitHub

React + Next.js

Приложение Next.js 16, което показва всеки компонент в контекст, с TypeScript навсякъде и демо страници за съставни шаблони.

→ Вижте в GitHub

Vue + Nuxt.js

Приложение Nuxt 4. <script setup> и Composition API във всеки демо маршрут.

→ Вижте в GitHub

Angular + Analog

Приложение Angular 22 + Analog.js. Маршрутизиране по файлове, signals, откриване на промени без зони и пълно предварително изобразяване със SSG.

→ Вижте в GitHub

Blazor Web

Приложение Blazor Web с компоненти Razor. Подходящо както за сървър, така и за WebAssembly, с .NET 10 като база.

→ Вижте в GitHub

Nunjucks + Eleventy

Сайт на Eleventy с макроси на Nunjucks. Идеален за статични сайтове с много съдържание, които все пак искат истинска система от компоненти.

→ Вижте в GitHub

Всяко примерно приложение има една и съща форма

За да е познато превключването между фреймуърци, всяко примерно приложение предоставя:

  • Приветствен маршрут на / който представя проекта.
  • Индекс на компонентите на /components който изброява всеки компонент.
  • Демо страница за всеки компонент на /components/<component>.
  • Истински CSS — не абстрактни дизайн токени — за да вземате стилове директно.
  • Работеща навигация с клавиатура и управление на фокуса от самото начало.

Трябва ви да видите как е стилизиран един компонент?

Отворете съответното примерно приложение, отидете на /components/<name>и копирайте маркировката и CSS в собствения си проект. Примерните приложения умишлено използват обикновен (или почти обикновен) CSS, за да ги адаптирате към всяка система, която предпочитате.

Искате безглав вместо това?

Съчетайте което и да е примерно приложение със съответния безглав пакет — те публикуват същите компоненти без никакъв CSS, готови за вашите собствени дизайн токени.

Разгледайте каталога → Прочетете ръководството за настройка