Aprenda a Lily, passo a passo
Boas-vindas! Cada tutorial começa do zero e constrói a mesma coisinha — um formulário acessível e estilizado — em cerca de 10 minutos, para que você compare os frameworks em igualdade de condições. Depois, aprofunde-se em temas e preferências do usuário.
Antes de começar
Você precisa de surpreendentemente pouco:
- Para o tutorial de HTML — apenas um navegador e um editor de texto. Esse é todo o kit de ferramentas.
- Para Svelte, React, Vue, Angular ou Nunjucks — git, Node 26 e pnpm 10 ou posterior.
- Para Blazor — git e o SDK do .NET 8 ou posterior.
Novo nos componentes headless? Você está no lugar certo — cada tutorial explica o que está acontecendo ao longo do caminho, e cada passo mostra o código exato para copiar.
Quatro passos do zero à publicação
- Seu primeiro componente (~5 minutos) — escolha seu framework abaixo, obtenha o código e renderize um botão.
- Componha e estilize (~5 minutos) — construa um formulário com rótulos e estilize-o com as classes de gancho em kebab-case (parte de cada tutorial de framework).
- Aplique um tema (~15 minutos) — troque o CSS escrito à mão por um dos 45 temas prontos e depois deixe os usuários alternarem em tempo de execução: tutorial de temas.
- Respeite as preferências (~15 minutos) — adicione a seleção de idioma e de tamanho do texto com os assistentes de preferências: tutorial de assistentes.
Escolha seu framework
HTML
Copie HTML semântico com as classes de gancho e pronto — um navegador e um editor bastam.
Svelte
Runes do Svelte 5, snippets e vinculação bidirecional com bind:value.
React
Componentes de função com value + onChange e propagação das demais propriedades.
Vue
Componentes de arquivo único do Vue 3 com suporte a v-model.
Angular
Componentes standalone do Angular com entradas de sinal e [(value)].
Blazor
Componentes Razor com parâmetros, ChildContent e testes com bUnit.
Nunjucks
Macros renderizadas no servidor para Eleventy e qualquer pipeline de templates do Node.
Em dúvida entre eles? Comece pelo HTML — ele ensina o contrato de classes de gancho que todos os outros frameworks compartilham e roda direto de um arquivo.
Vá mais fundo
Temas
Vincule um dos 45 temas prontos — NHS, GOV.UK, USWDS, claro, escuro e mais —, sobrescreva-o com seu próprio CSS e adicione a troca de tema em tempo de execução com o assistente theme-picker.
Assistentes de preferências
Dê aos usuários o controle de tema, idioma, tamanho do texto, movimento, busca, links de páginas, compartilhamento e entrada de data e hora com theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker e date-time-picker: controles headless com persistência, segurança para SSR e detecção automática de escrita da direita para a esquerda.
Depois dos tutoriais
- Explore o catálogo de componentes — cada componente documenta suas propriedades, seu contrato ARIA e seu comportamento de teclado.
- Clone um aplicativo de exemplo para ver os 571 componentes estilizados e funcionando juntos — o CSS mira as mesmas classes de gancho que você acabou de usar, então copie o que quiser para o seu projeto e ajuste como preferir.
- Dúvidas? A página de ajuda tem respostas, um FAQ e formas de falar com uma pessoa simpática. E se algum tutorial puder ficar mais claro, conte para nós — vamos melhorá-lo com prazer.