React-Tutorial — Lily Design System

Wat Dir bauen wäert

E klengt Kontaktformulaire — Feld mat Etikett, Schécken-Knäppchen, kontrolléierten Zoustand, 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 React 18+ Projet funktionéiert — Next.js, Vite oder einfachen React.

Schrëtt 1 — D'Code kréien

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

D'Komponenten sinn flaach Dateien am components/ — Button.tsx, TextInput.tsx — jidd mat sengem Test, senger Story a senger Dokumentatioun niewendrun. Kopéiert d'Dateien, déi Dir braucht, an Är App, oder hellt de Repo eran an importéiert dovunner.

Schrëtt 2 — Är éischt Komponent

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 (en aria-label zum Iwwerschreiwen), className, an all zousätzlechen Attribut gëtt um Wuerzelelement verspreet.

Schrëtt 3 — E klengt Formulaire zesummestellen

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 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.

Gepréift den 2026-08-29: en ale Brouillon huet eng separat Label bannen Fieldverschachtelt, wat zwee Etiketten (eng eidel) gerendert huet, well Field schonn säin eegenen aus dem label -Prop — entdeckt duerch d'Kompiléiere vum exakte Snippet. D'Route Déi zesummegesat Kontaktformulaire-Route ass datselwecht Muster, getest mat richtegen e2e- an axe-Tester.

Schrëtt 4 — Gestalt et

Alles hei uewen gëtt als pur Struktur gerendert, prett fir Är Stiler. Gestalt d'Hooks — .button, .text-input, .label, .field — an Ärem Stylesheet, leet Tailwind-Utilities iwwer className, oder verlinkt e fäerdegt Thema:

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

Schrëtt 5 — Alles am Aktioun gesinn

Next.js Beispill-App ass de ganze Katalog gestalt an demonstréiert, mat Playwright e2e an enger 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ächst Schrëtt

Themen — Wiessel zur Laafzäit mam React-Helper theme-picker.
Astellungs-Helperen — Sprooch a Textgréisst.
Komponentekatalog — Eegeschaften, ARIA an Tastatur pro Komponent.

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.