Svelte-Tutorial — Lily Design System

Was du baust

Ein kleines Kontaktformular — beschriftetes Eingabefeld, Absenden-Schaltfläche, Zwei-Wege-Bindung, echtes Tastatur- und Screenreader-Verhalten — zuerst nackt, dann gestaltet, in etwa 10 Minuten.

Bevor du anfängst

Du brauchst git, Node 22 oder neuer und pnpm 10 oder neuer. Jedes Svelte-5-Projekt funktioniert — eine frische npx sv create -App reicht.

Schritt 1 — Den Code holen

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

Die Komponenten liegen in src/lib/components/{Name}/, ein Verzeichnis pro Komponente mit der .svelte -Datei, ihren Tests, ihren Stories und ihrer Dokumentation nebeneinander. Kopiere die benötigten Verzeichnisse in deine App, oder hänge dich ans Repo und importiere direkt.

Schritt 2 — Deine erste Komponente

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

Rendert <button class="button" type="button">. Die Props sind typisiert: type, disabled, pressed (rendert aria-pressed (rendert label (ein aria-label für Umschalt-Buttons),

Schritt 3 — Ein kleines Formular zusammensetzen

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field nimmt das sichtbare label als eigene Prop statt als verschachtelte Label-Komponente — gib es einmal an, bei Fieldund TextInputvon label liefert den zugänglichen Namen. TextInput's value zum Überschreiben) und jedes zusätzliche Attribut wird auf die Wurzel verteilt. $bindable ist eine bind:value -Rune-Prop, daher

Geprüft am 2026-08-29: gibt dir sofort Zwei-Wege-Bindung. svelte/server genau dieses Snippet wurde über <label for> kompiliert und auf ein einzelnes, korrekt verknüpftes Label geprüft Label innerhalb von Field— ein früherer Entwurf verschachtelte ein separates zwei Labels (eines leer) rendert, weil Field bereits ein eigenes aus dem label darin, was Folgendes rendert: Die zusammengesetzte Kontaktformular-Route ist dasselbe Muster, getestet mit echten e2e- und axe-Tests.

Prüfe deine Arbeit: Starte die App, und das Formular sieht schlicht aus — genau wie beabsichtigt: Die Gestaltung kommt noch. Drücke Tab: Der Fokus wandert durch jedes Bedienelement, das Label wird angesagt und das Absenden funktioniert. Das Verhalten ist fertig; das Aussehen gehört dir und kommt als Nächstes.

Schritt 4 — Gestalten

Alles oben wird als reine Struktur gerendert, bereit für deine Styles. Gestalte die Klassen-Hooks — .button, .text-input, .label, .field — in deinem globalen Stylesheet, oder binde ein fertiges Theme ein in app.html:

<link rel="stylesheet" href="/themes/dark.css" />

Anpassungen pro Instanz laufen über die class -Prop, die an den Basis-Hook angehängt wird: <Button class="wide"> rendert class="button wide".

Schritt 5 — Alles in Aktion sehen

SvelteKit-Beispiel-App ist derselbe Katalog vollständig gestaltet, mit Live-Demos, Playwright-e2e-Tests und einer axe-core-Barrierefreiheits-Baseline:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

Nächste Schritte

Theming — Umschalten zur Laufzeit mit dem Svelte-Helper theme-picker.
Einstellungs-Helper — Sprache und Textgröße.
Komponentenkatalog — Props, ARIA und Tastatur pro Komponente.

Fragen unterwegs? Die Hilfeseite steckt voller Antworten — und wenn ein Schritt klarer sein könnte, sag es uns und wir verbessern das Tutorial gern.