Lily Design System™

Svelte-Tutorial

D'Svelte-Bibliothéik vu Lily ass déi kanonesch Implementatioun: Svelte-5-Runen, typiséiert Props, Verspreeche vun de Rescht-Props an Zwee-Weeër-Bindung mat bind:value.

Wat Dir bauen wäert

E klengt Kontaktformulaire — Feld mat Etikett, Schécken-Knäppchen, Zwee-Weeër-Bindung, richtegt Tastatur- an Écranliesser-Verhalen — fir d'éischt nackeg, duerno gestalt, an ongeféier 10 Minutten.

Ier Dir ufänkt

Dir braucht git, Node 22 oder méi nei a pnpm 10 oder méi nei. All Svelte-5-Projet funktionéiert — eng brandneu npx sv create -App reecht.

Schrëtt 1 — D'Code kréien

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

D'Komponente sinn am src/lib/components/{Name}/, ee Verzeechnes pro Komponent mat der .svelte -Datei, hiren Tester, hire Stories a hirer Dokumentatioun niewenee. Kopéiert d'Verzeechnesser, déi Dir braucht, an Är App, oder hänkt vum Repo of an importéiert direkt.

Schrëtt 2 — Är éischt Komponent

<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">. D'Props sinn typiséiert: type, disabled, pressed (rendert aria-pressed (rendert label (en aria-label fir Toggle-Knäppercher),

Schrëtt 3 — E klengt Formulaire zesummestellen

<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 hëlt dat siichtbart label als seng eege Prop amplaz vun enger verschachtelter Etikett-Komponent — gitt et eemol weider, bei Fieldan TextInputvun label liwwert den zougänglechen Numm. TextInput's value zum Iwwerschreiwen), an all zousätzlechen Attribut gëtt op d'Wuerzel verspreet. $bindable ass eng bind:value -Rune-Prop, sou datt

Gepréift den 2026-08-29: Iech direkt Zwee-Weeër-Bindung gëtt. svelte/server dësen exakte Snippet gouf iwwer <label for> kompiléiert a gepréift op ee eenzegt, korrekt verlinkt Etikett Label bannen Field— en ale Brouillon huet e separaten zwee Etiketten (eng eidel) gerendert huet, well Field schonn säin eegenen aus dem label dran verschachtelt, wat gerendert huet Déi zesummegesat Kontaktformulaire-Route ass datselwecht Muster, getest mat richtegen e2e- an axe-Tester.

Kontrolléiert Är Aarbecht: start d'App an d'Formulaire gesäit nackeg aus — genee wéi geduecht: d'Gestaltung kënnt nach. Dréckt Tab: de Fokus geet duerch all Kontroll, d'Etikett gëtt ugekënnegt an d'Schécken funktionéiert. D'Verhalen ass fäerdeg; d'Ausgesi ass Är a kënnt als Nächst.

Schrëtt 4 — Gestalt et

Alles hei uewen gëtt als pur Struktur gerendert, prett fir Är Stiler. Gestalt d'Klassen-Hooks — .button, .text-input, .label, .field — an Ärem globale Stylesheet, oder verlinkt e fäerdegt Thema am app.html: 

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

Upassunge pro Instanz ginn iwwer d' class -Prop, déi un de Basis-Hook ugehaang gëtt: <Button class="wide"> rendert class="button wide".

Schrëtt 5 — Alles am Aktioun gesinn

SvelteKit Beispill-App ass datselwecht Katalog voll gestalt, mat Live-Demoen, Playwright-e2e-Tester an enger axe-core-Zougänglechkeetsbaseline: 

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ächst Schrëtt

Froen ënnerwee? D'Hëllefsäit ass voller Äntwerten — a wann e Schrëtt méi kloer kéint sinn, soot et eis a mir verbesseren den Tutorial gär.