Erste Schritte mit Lily

Installation

Lily lebt in einem einzigen Git-Monorepo, mit einem Verzeichnis für die Headless-Bibliothek, die Helferpakete und die Beispiel-App jedes Frameworks. Am schnellsten probieren Sie es aus, indem Sie das Monorepo klonen und die Headless-Bibliothek für Ihren Stack öffnen:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install

Dasselbe Muster funktioniert für die anderen Frameworks:

• @lilydesignsystem/html-headless – keine Installation nötig; kopieren Sie die .html -Dateien
• @lilydesignsystem/svelte-headless — pnpm install
• @lilydesignsystem/react-headless — pnpm install
• @lilydesignsystem/vue-headless — pnpm install
• @lilydesignsystem/angular-headless — pnpm install
• @lilydesignsystem/nunjucks-headless — pnpm install
• lily-design-system-blazor-headless — dotnet build

Die Headless-Bibliotheken sind dafür gedacht, geklont oder eingebunden zu werden – betrachten Sie den Quellcode als maßgebliche Quelle und kopieren Sie, was Sie brauchen. Einstellungshelfer werden zusätzlich als installierbare Pakete mit Build- und Veröffentlichungs-Pipeline ausgeliefert (npm für die JS-Frameworks, NuGet für Blazor).

Eine Headless-Komponente verwenden

Headless-Komponenten liefern semantisches HTML, ARIA und Props – aber kein CSS. Hier ist ein Button in jedem Framework:

HTML

<button class="button" type="button" aria-label="Save">
  Save
</button>

Svelte

<script>
  import Button from "lily-design-system-svelte-headless/components/Button/Button.svelte";
</script>

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

React

import Button from "lily-design-system-react-headless/components/Button";

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

Vue

<script setup>
  import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<Button @click="save">Save</Button>

Angular

import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})

Blazor

<Button OnClick="Save">Save</Button>

Nunjucks

{% from "components/button/macro.njk" import button %}

{{ button({ text: "Save", type: "button" }) }}

Ein gestaltetes Beispiel verwenden

Die Beispiel-Apps enthalten CSS, Routen und vollständige Demoseiten. Am schnellsten experimentieren Sie, indem Sie die Beispiel-App für SvelteKit, Next, Nuxt, Analog oder Eleventy starten und die Demo ansehen unter /components.

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

Öffnen Sie dann http://localhost:5173 und stöbern Sie unter /components.

Gestaltung und Design-Tokens

Jede Komponente wird mit einer einzigen Kebab-Case-Klasse auf ihrem Wurzelelement gerendert. Zum Beispiel wird <Button> zu <button class="button">. Gestalten Sie es nach Belieben:

.button {
  background: var(--my-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}
.button:hover { background: var(--my-primary-hover); }

Die Standardfarbpalette von Lily (in den Beispiel-Apps verwendet) lautet:

• Primär: #2563eb
• Gefahr: #dc2626
• Warnung: #f59e0b
• Erfolg: #16a34a
• Seitenhintergrund: #f9fafb
• Kartenhintergrund: #ffffff

Das sind Vorschläge, keine Vorgaben. Ersetzen Sie sie durch Ihre eigene Markenpalette, und Lily zieht gern mit.

Fertige Themes

Sie möchten CSS nicht von Grund auf schreiben? Lily liefert 57 eigenständige Referenz-Themes im Verzeichnis themes/ aus. Jedes ist ein Stylesheet, das auf die Klassen-Hooks von Lily zielt – binden Sie es ein, und Sie sind gestaltet:

<link rel="stylesheet" href="/assets/themes/united-kingdom-government-digital-service.css" />

Der Satz umfasst:

• Öffentlicher Sektor – NHS England, NHS Scotland und NHS Wales (jeweils Varianten für Patienten und für Fachkräfte), GOV.UK GDS und das U.S. Web Design System.
• Von Anbietern inspiriert – Adobe Spectrum, Mozilla Protocol.
• Allgemeiner Zweck – light, dark, nord, dracula, wireframe und rund dreißig weitere.

Theme-Selektoren verwenden :where(...), daher gewinnt Ihr eigenes CSS bei der Spezifität immer. Kombinieren Sie sie mit dem Helfer theme-picker unten für den Wechsel zur Laufzeit, oder folgen Sie der Theming-Anleitung.

Einstellungshelfer

Jedes Framework hat acht kleine Picker, jeder ein eigenes lily-design-system-{framework}-{package} -Paket (und eine picker-bar , die sie zusammensetzt). Jeder ist eine Headless-Icon-Schaltfläche, die ein Popup öffnet – eine Listbox, eine Liste von Links, ein Suchformular oder (bei date-time-picker) einen Datumsauswahldialog – kein natives <select>; er ist SSR-sicher und liefert kein CSS mit:

• theme-picker – lädt Theme-Stylesheets zur Laufzeit, indem es ein verwaltetes <link>austauscht, setzt data-theme auf dem Dokument und speichert optional in localStorage.
• locale-picker – setzt lang und dir (mit automatischer RTL-Erkennung), damit Ihre i18n-Bibliothek folgen kann; übersetzt selbst nichts.
• text-size-picker – setzt data-text-size auf dem Dokument; Ihr CSS ordnet jeden Wert einer Schriftgröße zu.
• motion-picker – setzt data-motion auf dem Dokument, ausgehend von der Einstellung für reduzierte Bewegung des Besuchers; Ihr CSS und Ihre Skripte entscheiden, was unterdrückt wird.
• search-picker – eine Icon-Schaltfläche, die ein Suchfeld öffnet; das Absenden navigiert zu einer Suchseite. Verantwortet eine Aktion, keine Einstellung.
• link-picker – ein Haus-Icon, das ein Menü mit den Seitenlinks öffnet, die Ihre App definiert (Startseite, Über uns, Kontakt, Datenschutzerklärung, …). Verantwortet eine Aktion, keine Einstellung.
• share-picker – öffnet das native Teilen-Blatt oder eine vom Nutzer bereitgestellte Zielliste, plus URL kopieren. Verantwortet eine Aktion, keine Einstellung: wendet nichts an, speichert nichts.
• date-time-picker – ein Textfeld plus ein APG-Datumsauswahldialog für ein Datum, eine Uhrzeit oder beides. Verantwortet einen Formularwert, keine Einstellung: Die ISO-Zeichenkette wird hin und her umgewandelt zu <input type="date">.

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-theme-picker

Der Svelte-Katalog ist die kanonische Referenz; die Portierungen für React, Vue, Angular, HTML, Nunjucks, Web Components und Blazor entsprechen ihm Vertrag für Vertrag. Siehe die Helfer-Anleitung.

Barrierefreiheit

Die Komponenten zielen auf WCAG 2.2 AAA. Sie folgen diesen Mustern:

• Semantische HTML-Elemente statt generischer <div>s.
• <label for="id"> zur Verknüpfung von Beschriftungen mit Eingaben.
• aria-labelledby / aria-describedby für Querverweise.
• aria-invalid + aria-errormessage für Fehlerzustände.
• role="alert" und aria-live für dynamische Inhalte.
• aria-pressed, aria-expanded, aria-current für den Zustand.
• Roving tabindex für Raster.

Fokusindikatoren werden bewusst vom Nutzer bereitgestellt – Lily zeichnet nie einen Standard-Fokusrahmen, der mit Ihrem Design kollidiert. Die Beispiel-Apps halten auf allen Routen eine saubere axe-core-Baseline.

Internationalisierung

Jede Beschriftung, jeder Platzhalter, jede Fehlermeldung und jeder Schaltflächentext ist ein Prop. Es gibt keine fest codierten Zeichenketten. Binden Sie das Übersetzungs-Framework Ihrer Wahl ein – Paraglide, i18next, vue-i18n, react-intl, .resx-Dateien, alles.

Für Daten, Zahlen und Währungen nehmen die Komponenten vorformatierte Zeichenketten entgegen: Sie formatieren mit Intl.DateTimeFormat / Intl.NumberFormat / Ihrer bevorzugten Bibliothek und reichen das Ergebnis weiter.

Der Helfer locale-picker signalisiert Ihrer i18n-Bibliothek die gewählte Sprache, indem er lang und dir am Dokument-Root setzt.

Testen

Jedes Framework-Teilprojekt liefert eigene Tests mit seinem idiomatischen Stack:

• HTML: WebDriverIO mit echten Browsern.
• Svelte: Vitest + @testing-library/svelte.
• React: Vitest + @testing-library/react.
• Vue: Vitest + @testing-library/vue.
• Angular: Vitest + TestBed (über das Analog-Vite-Plugin).
• Nunjucks: Vitest mit einem Render-Helfer.
• Blazor: bUnit.

Tests verwenden nur die eingebauten Matcher von Vitest – niemals jest-dom -Matcher. Das hält die Test-Suiten portabel. Die Beispiel-Apps ergänzen Playwright-End-to-End-Suiten, axe-core-Barrierefreiheits-Baselines und einen Durchlauf über responsive Viewports.

KI-Agenten

Diese Website veröffentlicht llms.txt und llms.json in ihrem Root – eine kuratierte Karte ihrer wichtigsten Seiten, für jedes Werkzeug, das der llms.txt-Konvention.

Das kanonische Monorepo liefert zusätzlich zwei Claude Skills: lily-design-system-skill: eine Allzweck-Skill, die Lilys Konzepte, Terminologie und Kompositionsmuster für alle abdeckt, die mit dem System bauen, und lily-design-system-maintainer-skill, eine technische Skill, die das Layout der Pflichtdateien und die Werkzeuge des Monorepos für alle abdeckt, die daran arbeiten. Beide liegen im Root des kanonischen Monorepos.

Fehlerbehebung

Mitwirken

Lily ist jung und begrüßt Zusammenarbeit. Die nützlichsten Beiträge sind derzeit:

• Neue Komponenten (besonders Muster aus etablierten Designsystemen).
• Neue Themes – jedes ist ein eigenständiges Stylesheet, ein gut abgegrenzter erster PR.
• Bessere Gestaltung der Beispiele – zeigen Sie, was möglich ist.
• Übersetzungen der Zeichenketten der Beispiel-Apps.
• Fehlerberichte mit minimaler Reproduktion.
• Barrierefreiheits-Audits mit Screenreadern und assistiven Technologien.

Eröffnen Sie Issues und PRs auf github.com/LilyDesignSystem/lily-design-system.

Community und Support

• Fragen und Fehlerberichte – eröffnen Sie ein Issue auf github.com/LilyDesignSystem/lily-design-system.
• E-Mail – der Maintainer liest joel@joelparkerhenderson.com und freut sich über Zusammenarbeit, Anleitung und Rückmeldungen.
• Spiegel – Lily wird auch gepusht nach Codeberg und GitLab, sodass Sie von der Forge aus mitmachen können, die Sie bevorzugen.
• Verhalten – das Projekt folgt einem üblichen Verhaltenskodex; seien Sie freundlich und gehen Sie von guten Absichten aus.

FAQ