Aprende Lily paso a paso
¡Bienvenido! Cada tutorial empieza desde cero y construye lo mismo —un formulario accesible y con estilo— en unos 10 minutos, para que puedas comparar frameworks en igualdad de condiciones. Después profundiza en los temas y las preferencias del usuario.
Antes de empezar
Necesitas sorprendentemente poco:
- Para el tutorial de HTML: solo un navegador y un editor de texto. Ese es todo el equipo.
- Para Svelte, React, Vue, Angular o Nunjucks: git, Node 26 y pnpm 10 o posterior.
- Para Blazor: git y el SDK de .NET 8 o posterior.
¿Eres nuevo en los componentes headless? Estás en el lugar adecuado: cada tutorial explica lo que ocurre sobre la marcha, y cada paso muestra el código exacto que debes copiar.
Cuatro pasos de cero a publicado
- Tu primer componente (~5 minutos): elige tu framework más abajo, obtén el código y renderiza un botón.
- Compón y da estilo (~5 minutos): construye un formulario con etiquetas y dale estilo con las clases de enlace en kebab-case (forma parte de cada tutorial de framework).
- Ponle un tema (~15 minutos): cambia tu CSS escrito a mano por uno de los 45 temas listos para usar y deja que los usuarios cambien de tema en tiempo de ejecución: tutorial de temas.
- Respeta las preferencias (~15 minutos): añade la selección de idioma y de tamaño del texto con los asistentes de preferencias: tutorial de asistentes.
Elige tu framework
HTML
Copia HTML semántico con las clases de enlace y listo: basta un navegador y un editor.
Svelte
Runes de Svelte 5, fragmentos y enlace bidireccional con bind:value.
React
Componentes de función con value + onChange y propagación de las propiedades restantes.
Vue
Componentes de archivo único de Vue 3 con compatibilidad con v-model.
Angular
Componentes independientes de Angular con entradas de señal y [(value)].
Blazor
Componentes Razor con parámetros, ChildContent y pruebas con bUnit.
Nunjucks
Macros renderizadas en el servidor para Eleventy y cualquier flujo de plantillas de Node.
¿Dudas entre varios? Empieza por HTML: enseña el contrato de clases de enlace que comparten todos los demás frameworks y se ejecuta directamente desde un archivo.
Ve más a fondo
Temas
Enlaza uno de los 45 temas listos para usar —NHS, GOV.UK, USWDS, claro, oscuro y más—, sobrescríbelo con tu propio CSS y añade el cambio de tema en tiempo de ejecución con el asistente theme-picker.
Asistentes de preferencias
Da a los usuarios el control del tema, el idioma, el tamaño del texto, el movimiento, la búsqueda, los enlaces de página, el uso compartido y la entrada de fecha y hora con theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker y date-time-picker: controles headless con persistencia, compatibilidad con SSR y detección automática de escritura de derecha a izquierda.
Después de los tutoriales
- Explora el catálogo de componentes: cada componente documenta sus propiedades, su contrato ARIA y su comportamiento con el teclado.
- Clona una aplicación de ejemplo para ver los 571 componentes con estilo y funcionando juntos: el CSS apunta a las mismas clases de enlace que acabas de usar, así que copia lo que quieras a tu proyecto y ajústalo a tu gusto.
- ¿Preguntas? La página de ayuda tiene respuestas, preguntas frecuentes y formas de contactar con una persona amable. Y si algún tutorial pudiera ser más claro, cuéntanoslo: lo mejoraremos con gusto.