Lily lernen, Schritt für Schritt
Willkommen! Jede Anleitung beginnt bei null und baut dasselbe kleine Ding – ein barrierefreies, gestaltetes Formular – in etwa 10 Minuten, damit Sie Frameworks fair vergleichen können. Danach geht es tiefer mit Theming und Benutzereinstellungen.
Bevor Sie beginnen
Sie brauchen erstaunlich wenig:
- Für die HTML-Anleitung – nur einen Browser und einen Texteditor. Das ist das gesamte Werkzeug.
- Für Svelte, React, Vue, Angular oder Nunjucks — git, Node 26 und pnpm 10 oder neuer.
- Für Blazor – git und das .NET SDK 8 oder neuer.
Neu bei Headless-Komponenten? Dann sind Sie hier richtig – jede Anleitung erklärt, was beim Vorgehen passiert, und jeder Schritt zeigt den genauen Code zum Kopieren.
Vier Schritte von null bis zur Auslieferung
- Ihre erste Komponente (ca. 5 Minuten) – wählen Sie unten Ihr Framework, holen Sie den Code und rendern Sie einen Button.
- Zusammensetzen und gestalten (ca. 5 Minuten) – bauen Sie ein beschriftetes Formular und gestalten Sie es über die Klassen-Hooks in Kebab-Case (Teil jeder Framework-Anleitung).
- Mit einem Theme versehen (ca. 15 Minuten) – tauschen Sie Ihr selbst geschriebenes CSS gegen eines der 57 fertigen Themes und lassen Sie Nutzer dann zur Laufzeit wechseln: Theming-Anleitung.
- Einstellungen respektieren (ca. 15 Minuten) – fügen Sie mit den Einstellungshelfern die Auswahl von Sprache und Textgröße hinzu: Helfer-Anleitung.
Wählen Sie Ihr Framework
HTML
Kopieren Sie semantisches HTML mit den Klassen-Hooks und legen Sie los – ein Browser und ein Editor genügen.
Svelte
Svelte-5-Runes, Snippets und bind:value Zwei-Wege-Bindung.
React
Funktionskomponenten mit value + onChange und Weitergabe der übrigen Props.
Vue
Vue-3-Single-File-Komponenten mit Unterstützung für v-model .
Angular
Eigenständige Angular-Komponenten mit Signal-Eingaben und [(value)].
Blazor
Razor-Komponenten mit Parametern, ChildContentund bUnit-Tests.
Nunjucks
Serverseitig gerenderte Makros für Eleventy und jede Node-Template-Pipeline.
Unentschlossen? Beginnen Sie mit HTML – es vermittelt den Vertrag der Klassen-Hooks, den jedes andere Framework teilt, und läuft direkt aus einer Datei.
Tiefer einsteigen
Theming
Binden Sie eines von 57 fertigen Themes ein – NHS, GOV.UK, USWDS, hell, dunkel und mehr –, überschreiben Sie es mit eigenem CSS und fügen Sie mit dem Helfer theme-picker einen Theme-Wechsel zur Laufzeit hinzu.
Einstellungshelfer
Geben Sie Nutzern Kontrolle über Theme, Sprache, Textgröße, Bewegung, Suche, Seitenlinks, Teilen und Eingabe von Datum/Uhrzeit mit theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker und date-time-picker: Headless-Steuerelemente mit Persistenz, SSR-Sicherheit und automatischer RTL-Erkennung.
Nach den Anleitungen
- Stöbern Sie im Komponentenkatalog – jede Komponente dokumentiert ihre Props, ihren ARIA-Vertrag und ihr Tastaturverhalten.
- Klonen Sie eine Beispiel-App um alle 571 Komponenten gestaltet und zusammenarbeitend zu sehen – das CSS zielt auf dieselben Klassen-Hooks, die Sie gerade benutzt haben, also kopieren Sie davon, was Sie wollen, in Ihr Projekt und passen Sie es nach Belieben an.
- Fragen? Die Hilfeseite hat Antworten, eine FAQ und Wege, einen freundlichen Menschen zu erreichen. Und wenn eine Anleitung klarer sein könnte, sagen Sie es uns – wir verbessern sie gern.