Apprenez Lily pas à pas
Bienvenue ! Chaque tutoriel part de zéro et construit la même petite chose — un formulaire accessible et stylé — en une dizaine de minutes, pour que vous puissiez comparer les frameworks à armes égales. Allez ensuite plus loin avec les thèmes et les préférences utilisateur.
Avant de commencer
Il vous faut étonnamment peu de choses :
- Pour le tutoriel HTML — juste un navigateur et un éditeur de texte. C'est toute la boîte à outils.
- Pour Svelte, React, Vue, Angular ou Nunjucks — git, Node 26 et pnpm 10 ou supérieur.
- Pour Blazor — git et le SDK .NET 8 ou supérieur.
Nouveau dans les composants headless ? Vous êtes au bon endroit — chaque tutoriel explique ce qui se passe au fur et à mesure, et chaque étape montre le code exact à copier.
Quatre étapes, de zéro à la mise en ligne
- Votre premier composant (~5 minutes) — choisissez votre framework ci-dessous, récupérez le code et affichez un bouton.
- Composer et mettre en forme (~5 minutes) — construisez un formulaire avec libellés et stylez-le avec les classes d'accroche en kebab-case (inclus dans chaque tutoriel de framework).
- Lui appliquer un thème (~15 minutes) — remplacez votre CSS écrit à la main par l'un des 45 thèmes prêts à l'emploi, puis laissez les utilisateurs en changer à l'exécution : tutoriel sur les thèmes.
- Respecter les préférences (~15 minutes) — ajoutez le choix de la langue et de la taille du texte avec les assistants de préférences : tutoriel sur les assistants.
Choisissez votre framework
HTML
Copiez du HTML sémantique avec les classes d'accroche et c'est parti — un navigateur et un éditeur suffisent.
Svelte
Runes de Svelte 5, fragments et liaison bidirectionnelle bind:value.
React
Composants fonctions avec value + onChange et propagation des propriétés restantes.
Vue
Composants monofichiers Vue 3 avec prise en charge de v-model.
Angular
Composants autonomes Angular avec entrées de signal et [(value)].
Blazor
Composants Razor avec paramètres, ChildContent et tests bUnit.
Nunjucks
Macros rendues côté serveur pour Eleventy et toute chaîne de modèles Node.
Hésitant ? Commencez par HTML — il enseigne le contrat des classes d'accroche que tous les autres frameworks partagent, et il s'exécute directement depuis un fichier.
Aller plus loin
Thèmes
Liez l'un des 45 thèmes prêts à l'emploi — NHS, GOV.UK, USWDS, clair, sombre et d'autres — surchargez-le avec votre propre CSS et ajoutez le changement de thème à l'exécution avec l'assistant theme-picker.
Assistants de préférences
Donnez aux utilisateurs le contrôle du thème, de la langue, de la taille du texte, des animations, de la recherche, des liens de pages, du partage et de la saisie de date et d'heure avec theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker et date-time-picker : des contrôles headless avec persistance, compatibilité SSR et détection automatique de l'écriture de droite à gauche.
Après les tutoriels
- Parcourez le catalogue de composants — chaque composant documente ses propriétés, son contrat ARIA et son comportement au clavier.
- Clonez une application d'exemple pour voir les 571 composants stylés et fonctionnant ensemble — le CSS cible les mêmes classes d'accroche que celles que vous venez d'utiliser ; copiez-en ce que vous voulez dans votre projet et adaptez-le à votre guise.
- Des questions ? La page d'aide contient des réponses, une FAQ et des moyens de joindre un humain bienveillant. Et si un tutoriel pouvait être plus clair, dites-le-nous — nous l'améliorerons volontiers.