React-Tutorial — Lily Design System

Was du baust

Ein kleines Kontaktformular — beschriftetes Eingabefeld, Absenden-Schaltfläche, kontrollierter Zustand, 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 React-18+-Projekt funktioniert — Next.js, Vite oder reines React.

Schritt 1 — Den Code holen

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-react-headless
pnpm install
pnpm test        # vitest + @testing-library/react
pnpm run storybook   # browse all 571 components

Die Komponenten sind flache Dateien in components/ — Button.tsx, TextInput.tsx — jede mit ihrem Test, ihrer Story und ihrer Dokumentation daneben. Kopiere die benötigten Dateien in deine App, oder hole das Repo und importiere daraus.

Schritt 2 — Deine erste Komponente

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

export function SaveBar() {
  return <Button onClick={save}>Save</Button>;
}

Rendert <button class="button" type="button">. Props: type, disabled, pressed (rendert aria-pressed), label (ein aria-label zum Überschreiben), className, und jedes zusätzliche Attribut wird auf das Wurzelelement verteilt.

Schritt 3 — Ein kleines Formular zusammensetzen

import { useState } from "react";
import Form from ".../components/Form";
import Field from ".../components/Field";
import TextInput from ".../components/TextInput";
import Button from ".../components/Button";

export function ContactForm() {
  const [name, setName] = useState("");
  return (
    <Form label="Contact form" onSubmit={handleSubmit}>
      <Field label="Full name" required>
        <TextInput id="name" label="Full name" value={name} onChange={setName} 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.

Geprüft am 2026-08-29: ein früherer Entwurf verschachtelte eine separate Label innerhalb von Field, was zwei Labels (eines leer) rendert, weil Field bereits ein eigenes aus dem label -Prop — durch Kompilieren des exakten Snippets entdeckt. Die Die zusammengesetzte Kontaktformular-Route ist dasselbe Muster, getestet mit echten e2e- und axe-Tests.

Schritt 4 — Gestalten

Alles oben wird als reine Struktur gerendert, bereit für deine Styles. Gestalte die Hooks — .button, .text-input, .label, .field — in deinem Stylesheet, schichte Tailwind-Utilities über className, oder binde ein fertiges Theme ein:

<link rel="stylesheet" href="/themes/united-states-web-design-system.css" />

Schritt 5 — Alles in Aktion sehen

Next.js-Beispiel-App ist der vollständige Katalog gestaltet und demonstriert, mit Playwright-e2e und einer axe-core-Baseline:

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

Nächste Schritte

Theming — Umschalten zur Laufzeit mit dem React-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.