Svelte-handledning — Lily Design System

Det här bygger du

Ett litet kontaktformulär — fält med etikett, skicka-knapp, tvåvägsbindning, verkligt tangentbords- och skärmläsarbeteende — först naket, sedan formgivet, på ungefär 10 minuter.

Innan du börjar

Du behöver git, Node 22 eller senare och pnpm 10 eller senare. Alla Svelte 5-projekt fungerar — en alldeles ny npx sv create -app räcker.

Steg 1 — Hämta koden

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

Komponenterna finns i src/lib/components/{Name}/, en katalog per komponent med .svelte -filen, dess tester, dess stories och dess dokumentation sida vid sida. Kopiera de kataloger du behöver till din app, eller beror på förvaret och importera direkt.

Steg 2 — Din första komponent

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

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

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

Renderar <button class="button" type="button">. Propsen är typade: type, disabled, pressed (renderar aria-pressed (renderar label (ett aria-label för växlingsknappar),

Steg 3 — Sätt ihop ett litet formulär

<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 tar den synliga label som sin egen prop i stället för en nästlad etikettkomponent — skicka den en gång, på Fieldoch TextInputfrån label ger det tillgängliga namnet. TextInput's value för att åsidosätta) och varje extra attribut sprids på roten. $bindable är en bind:value -rune-prop, så

Verifierat 2026-08-29: ger dig tvåvägsbindning direkt. svelte/server det här exakta kodavsnittet kompilerades via <label for> och kontrollerades för en enda, korrekt länkad etikett Label inuti Field— ett tidigare utkast nästlade en separat två etiketter (en tom) eftersom Field redan renderar sin egen från label inuti, vilket renderade Den sammansatta kontaktformulärsrutten är samma mönster, prövat med riktiga e2e- och axe-tester.

Kontrollera ditt arbete: kör appen så ser formuläret kargt ut — precis som tänkt: formgivningen återstår. Tryck på Tab: fokus flyttas genom varje kontroll, etiketten läses upp och inskickning fungerar. Beteendet är klart; utseendet är ditt och kommer härnäst.

Steg 4 — Formge det

Allt ovan renderas som ren struktur, redo för dina stilar. Formge klasskrokarna — .button, .text-input, .label, .field — i din globala stilmall, eller länka ett färdigt tema i app.html:

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

Justeringar per instans går via class -propen, som läggs till på baskroken: <Button class="wide"> renderar class="button wide".

Steg 5 — Se allt fungera

Exempelappen SvelteKit är samma katalog fullt formgiven, med levande demos, Playwright e2e-tester och en axe-core-tillgänglighetsbaslinje:

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ästa steg

Teman — byte under körning med Svelte-hjälparen theme-picker.
Inställningshjälpare — språk och textstorlek.
Komponentkatalog — egenskaper, ARIA och tangentbord per komponent.

Frågor på vägen? Hjälpsidan är full av svar — och om ett steg kan bli tydligare, berätta för oss så förbättrar vi gärna handledningen.