Veja a Lily em aplicativos reais
Sete projetos de exemplo mostram como pegar os componentes headless, aplicar estilo e publicar um site de verdade. Escolha o framework que você usa.
Aplicativos de demonstração com CSS completo e roteamento
HTML JavaScript
Páginas HTML simples, JavaScript puro, sem ferramentas de build. Funciona em qualquer hospedagem estática — perfeito para sites pequenos e aprimoramento progressivo.
Svelte + SvelteKit
Aplicativo SvelteKit 3 usando runes do Svelte 5. Rotas de componentes, roteamento baseado em arquivos e um storybook estilizado de cada componente.
React + Next.js
Aplicativo Next.js 16 que mostra cada componente em contexto, com TypeScript em todo o projeto e páginas de demonstração de padrões compostos.
Vue + Nuxt.js
Aplicativo Nuxt 4. <script setup> e a Composition API em todas as rotas de demonstração.
Angular + Analog
Aplicativo Angular 22 + Analog.js. Roteamento baseado em arquivos, sinais, detecção de mudanças sem zone e pré-renderização SSG completa.
Blazor Web
Aplicativo Blazor Web com componentes Razor. Compatível com servidor e WebAssembly, com .NET 10 como base.
Nunjucks + Eleventy
Site Eleventy usando macros do Nunjucks. Ideal para sites estáticos ricos em conteúdo que ainda querem um sistema de componentes de verdade.
Todo aplicativo de exemplo tem o mesmo formato
Para que alternar entre frameworks pareça familiar, cada aplicativo de exemplo oferece:
- Uma rota de boas-vindas em
/que apresenta o projeto. - Um índice de componentes em
/componentsque lista todos os componentes. - Uma página de demonstração por componente em
/components/<component>. - CSS de verdade — não tokens de design abstratos — para você copiar os estilos diretamente.
- Navegação por teclado e gerenciamento de foco funcionando de imediato.
Precisa ver como um único componente é estilizado?
Abra o aplicativo de exemplo correspondente, vá até /components/<name> e copie a marcação e o CSS para o seu projeto. Os aplicativos de exemplo usam deliberadamente CSS simples (ou quase) para que você os adapte a qualquer sistema que preferir.
Prefere headless?
Combine qualquer aplicativo de exemplo com o pacote headless correspondente — eles publicam os mesmos componentes sem nenhum CSS, prontos para os seus próprios tokens de design.