Lásd a Lilyt valódi alkalmazásokban
Hét kidolgozott példaprojekt mutatja meg, hogyan vedd a fej nélküli komponenseket, rétegezz rájuk stílust, és adj ki egy valódi webhelyet. Válaszd ki a használt keretrendszert.
Demóalkalmazások teljes CSS-sel és útválasztással
HTML JavaScript
Sima HTML-oldalak, vanília JavaScript, build-eszközök nélkül. Bármely statikus tárhelyre ráfér – ideális kis webhelyekhez és fokozatos továbbfejlesztéshez.
Svelte + SvelteKit
Svelte 5 rúnákat használó SvelteKit 3 alkalmazás. Komponensútvonalak, fájlalapú útválasztás és minden komponens stílusozott storybookja.
React + Next.js
Next.js 16 alkalmazás, amely minden komponenst környezetében mutat be, végig TypeScripttel és demóoldalakkal az összetett mintákhoz.
Vue + Nuxt.js
Nuxt 4 alkalmazás. <script setup> és a Composition API minden demóútvonalon.
Angular + Analog
Angular 22 + Analog.js alkalmazás. Fájlalapú útválasztás, signalok, zónamentes változásészlelés és teljes SSG-előrenderelés.
Blazor Web
Blazor Web alkalmazás Razor-komponensekkel. Kiszolgáló- és WebAssembly-barát, .NET 10 alappal.
Nunjucks + Eleventy
Nunjucks-makrókat használó Eleventy-webhely. Ideális tartalomgazdag statikus webhelyekhez, amelyek mégis valódi komponensrendszert szeretnének.
Minden példaalkalmazás ugyanolyan felépítésű
Hogy a keretrendszerek közti ugrálás ismerősnek hasson, minden példaalkalmazás biztosít:
- Üdvözlő útvonalat itt:
/amely bemutatja a projektet. - Komponensindexet itt:
/componentsamely felsorol minden komponenst. - Komponensenként egy demóoldalt itt:
/components/<component>. - Valódi CSS-t – nem absztrakt tervezési tokeneket –, hogy közvetlenül átvehesd a stílusokat.
- Működő billentyűzetes navigációt és fókuszkezelést dobozból.
Látnod kell, hogyan van stílusozva egyetlen komponens?
Nyisd meg a megfelelő példaalkalmazást, navigálj ide:
/components/<name>és másold a jelölést és a CSS-t a saját projektedbe. A példaalkalmazások szándékosan egyszerű (vagy majdnem egyszerű) CSS-t használnak, hogy bármilyen általad preferált rendszerhez igazíthasd őket.
Inkább fej nélkülit szeretnél?
Párosíts bármely példaalkalmazást a megfelelő fej nélküli csomaggal – ezek ugyanazokat a komponenseket teszik közzé CSS nélkül, készen a saját tervezési tokenjeidre.