Sjáðu Lily í raunverulegum forritum

Sjö fullunnin dæmaverkefni sýna hvernig á að taka höfuðlausu íhlutina, bæta við stíl og gefa út raunverulegan vef. Veldu rammann sem þú notar.

Sýniforrit með fullu CSS og leiðsögn

HTML JavaScript

Venjulegar HTML-síður, hreint JavaScript, engin byggingartól. Fer á hvaða kyrrstæða vefþjón sem er — fullkomið fyrir litla vefi og stigvaxandi endurbætur.

→ Skoða á GitHub

Svelte + SvelteKit

SvelteKit 3 forrit sem notar Svelte 5 runes. Íhlutaleiðir, skráamiðuð leiðsögn og stílað storybook fyrir hvern íhlut.

→ Skoða á GitHub

React + Next.js

Next.js 16 forrit sem sýnir hvern íhlut í samhengi, með TypeScript í gegn og sýnisíðum fyrir samsett mynstur.

→ Skoða á GitHub

Vue + Nuxt.js

Nuxt 4 forrit. <script setup> og Composition API á hverri sýnileið.

→ Skoða á GitHub

Angular + Analog

Angular 22 + Analog.js forrit. Skráamiðuð leiðsögn, merki, svæðislaus breytingagreining og full SSG-forvinnsla.

→ Skoða á GitHub

Blazor Web

Blazor Web forrit með Razor-íhlutum. Hentar bæði miðlara og WebAssembly, með .NET 10 sem grunn.

→ Skoða á GitHub

Nunjucks + Eleventy

Eleventy-vefur sem notar Nunjucks-makró. Tilvalinn fyrir efnismikla kyrrstæða vefi sem vilja samt raunverulegt íhlutakerfi.

→ Skoða á GitHub

Öll dæmaforrit hafa sömu lögun

Til að gera flakk milli ramma kunnuglegt býður hvert dæmaforrit:

Velkomuleið á / sem kynnir verkefnið.
Íhlutayfirlit á /components sem telur upp hvern íhlut.
Sýnisíðu fyrir hvern íhlut á /components/<component>.
Raunverulegt CSS — ekki óhlutbundin hönnunargildi — svo þú getir afritað stíla beint.
Lyklaborðsleiðsögn og fókusstýring sem virka strax.

Þarftu að sjá hvernig einn íhlutur er stílaður?

Opnaðu viðeigandi dæmaforrit, farðu á /components/<name>og afritaðu markup og CSS í þitt eigið verkefni. Dæmaforritin nota viljandi venjulegt CSS (eða því sem næst) svo þú getir aðlagað þau að hvaða kerfi sem þú vilt.

Viltu frekar höfuðlaust?

Paraðu hvaða dæmaforrit sem er við samsvarandi höfuðlausa pakka — þeir gefa út sömu íhluti án nokkurs CSS, tilbúna fyrir þín eigin hönnunargildi.

Skoða safnið → Lestu uppsetningarleiðbeiningarnar