Vezi Lily în aplicații reale
Șapte proiecte-exemplu complete arată cum să iei componentele headless, să adaugi stilizare și să livrezi un site real. Alege framework-ul pe care îl folosești.
Aplicații demo cu CSS complet și rutare
HTML JavaScript
Pagini HTML simple, JavaScript pur, fără instrumente de build. Se potrivește pe orice gazdă statică — perfect pentru site-uri mici și îmbunătățire progresivă.
Svelte + SvelteKit
Aplicație SvelteKit 3 care folosește rune Svelte 5. Rute de componente, rutare bazată pe fișiere și un storybook stilizat pentru fiecare componentă.
React + Next.js
Aplicație Next.js 16 care arată fiecare componentă în context, cu TypeScript peste tot și pagini demo pentru modele compuse.
Vue + Nuxt.js
Aplicație Nuxt 4. <script setup> și Composition API pe fiecare rută demo.
Angular + Analog
Aplicație Angular 22 + Analog.js. Rutare bazată pe fișiere, signals, detectare a modificărilor fără zone și prerandare SSG completă.
Blazor Web
Aplicație Blazor Web cu componente Razor. Potrivită atât pentru server, cât și pentru WebAssembly, cu .NET 10 ca bază.
Nunjucks + Eleventy
Site Eleventy care folosește macrouri Nunjucks. Ideal pentru site-uri statice bogate în conținut care vor totuși un sistem real de componente.
Fiecare aplicație-exemplu are aceeași formă
Pentru ca trecerea între framework-uri să pară familiară, fiecare aplicație-exemplu oferă:
- O rută de bun venit la
/care prezintă proiectul. - Un index de componente la
/componentscare listează fiecare componentă. - O pagină demo pentru fiecare componentă la
/components/<component>. - CSS real — nu tokenuri de design abstracte — ca să poți prelua direct stilurile.
- Navigare cu tastatura și gestionare a focalizării funcționale din start.
Vrei să vezi cum este stilizată o singură componentă?
Deschide aplicația-exemplu relevantă, navighează la
/components/<name>și copiază markup-ul și CSS-ul în propriul proiect. Aplicațiile-exemplu folosesc intenționat CSS simplu (sau aproape simplu), ca să le poți adapta la orice sistem preferi.
Preferi headless?
Asociază orice aplicație-exemplu cu pachetul headless corespunzător — acestea publică aceleași componente fără niciun CSS, gata pentru propriile tale tokenuri de design.