Voir Lily dans de vraies applications
Sept projets d'exemple montrent comment prendre les composants headless, ajouter une mise en forme et livrer un vrai site web. Choisissez le framework que vous utilisez.
Des applications de démonstration avec CSS complet et routage
HTML JavaScript
Pages HTML simples, JavaScript natif, aucun outil de compilation. Se dépose sur n'importe quel hébergement statique — parfait pour les petits sites et l'amélioration progressive.
Svelte + SvelteKit
Application SvelteKit 3 utilisant les runes de Svelte 5. Routes de composants, routage par fichiers et un storybook stylé de chaque composant.
React + Next.js
Application Next.js 16 présentant chaque composant en contexte, avec TypeScript partout et des pages de démonstration pour les motifs composés.
Vue + Nuxt.js
Application Nuxt 4. <script setup> et l'API de composition sur chaque route de démonstration.
Angular + Analog
Application Angular 22 + Analog.js. Routage par fichiers, signaux, détection des changements sans zone et prérendu SSG complet.
Blazor Web
Application Blazor Web avec composants Razor. Compatible serveur et WebAssembly, avec .NET 10 comme base.
Nunjucks + Eleventy
Site Eleventy utilisant des macros Nunjucks. Idéal pour les sites statiques riches en contenu qui veulent tout de même un vrai système de composants.
Toutes les applications d'exemple ont la même forme
Pour que passer d'un framework à l'autre paraisse familier, chaque application d'exemple fournit :
- Une route d'accueil en
/qui présente le projet. - Un index des composants en
/componentsqui liste chaque composant. - Une page de démonstration par composant en
/components/<component>. - Du vrai CSS — pas des jetons de design abstraits — pour que vous puissiez vous en inspirer directement.
- Une navigation au clavier et une gestion du focus qui fonctionnent dès l'installation.
Besoin de voir comment un composant est stylé ?
Ouvrez l'application d'exemple correspondante, rendez-vous sur /components/<name> et copiez le balisage et le CSS dans votre projet. Les applications d'exemple utilisent volontairement du CSS simple (ou presque) afin que vous puissiez les adapter à n'importe quel système.
Plutôt headless ?
Associez n'importe quelle application d'exemple à son paquet headless correspondant — ils publient les mêmes composants sans aucun CSS, prêts pour vos propres jetons de design.