Mira Lily en aplicaciones reales
Siete proyectos de ejemplo muestran cómo tomar los componentes headless, añadirles estilo y publicar un sitio web real. Elige el framework que usas.
Aplicaciones de demostración con CSS completo y enrutamiento
HTML JavaScript
Páginas HTML sencillas, JavaScript puro, sin herramientas de compilación. Se despliega en cualquier alojamiento estático: perfecto para sitios pequeños y mejora progresiva.
Svelte + SvelteKit
Aplicación SvelteKit 3 con runes de Svelte 5. Rutas de componentes, enrutamiento basado en archivos y un storybook con estilo de cada componente.
React + Next.js
Aplicación Next.js 16 que muestra cada componente en contexto, con TypeScript en todo el proyecto y páginas de demostración de patrones compuestos.
Vue + Nuxt.js
Aplicación Nuxt 4. <script setup> y la API de composición en cada ruta de demostración.
Angular + Analog
Aplicación Angular 22 + Analog.js. Enrutamiento basado en archivos, señales, detección de cambios sin zone y prerenderizado SSG completo.
Blazor Web
Aplicación Blazor Web con componentes Razor. Compatible con servidor y WebAssembly, con .NET 10 como base.
Nunjucks + Eleventy
Sitio Eleventy con macros de Nunjucks. Ideal para sitios estáticos con mucho contenido que aun así quieren un sistema de componentes de verdad.
Todas las aplicaciones de ejemplo tienen la misma forma
Para que saltar de un framework a otro resulte familiar, cada aplicación de ejemplo ofrece:
- Una ruta de bienvenida en
/que presenta el proyecto. - Un índice de componentes en
/componentsque enumera todos los componentes. - Una página de demostración por componente en
/components/<component>. - CSS real —no tokens de diseño abstractos— para que puedas copiar los estilos directamente.
- Navegación con teclado y gestión del foco que funcionan desde el primer momento.
¿Necesitas ver cómo se da estilo a un solo componente?
Abre la aplicación de ejemplo correspondiente, ve a /components/<name> y copia el marcado y el CSS en tu propio proyecto. Las aplicaciones de ejemplo usan deliberadamente CSS sencillo (o casi) para que puedas adaptarlas a cualquier sistema que prefieras.
¿Prefieres headless?
Combina cualquiera de las aplicaciones de ejemplo con su paquete headless correspondiente: publican los mismos componentes sin nada de CSS, listos para tus propios tokens de diseño.