Tutorial React — Lily Design System

Cosa costruirai

Un piccolo modulo di contatto — campo con etichetta, pulsante di invio, stato controllato, comportamento reale di tastiera e screen reader — prima spoglio, poi stilizzato, in circa 10 minuti.

Prima di iniziare

Servono git, Node 22 o successivo e pnpm 10 o successivo. Va bene qualsiasi progetto React 18+ — Next.js, Vite o React semplice.

Passo 1 — Ottieni il codice

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

I componenti sono file piatti in components/ — Button.tsx, TextInput.tsx — ognuno con il suo test, la sua story e la sua documentazione accanto. Copia i file che ti servono nella tua app, oppure integra il repository e importa da lì.

Passo 2 — Il tuo primo componente

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

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

Rende <button class="button" type="button">. Prop: type, disabled, pressed (rende aria-pressed), label (un aria-label per sostituire), className, e qualsiasi attributo in più si propaga sull'elemento radice.

Passo 3 — Componi un piccolo modulo

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 riceve l' label come prop propria invece di un componente etichetta annidato — passala una sola volta, su Fielde TextInputcorrispondente label fornisce il nome accessibile.

Verificato il 2026-08-29: una bozza precedente annidava un componente Label dentro Field, che rendeva due etichette (una vuota) perché Field rende già la propria dall'input label prop — individuato compilando lo snippet esatto. La rotta La rotta composta del modulo di contatto è lo stesso schema, collaudato da veri test e2e e axe.

Passo 4 — Dagli uno stile

Tutto quanto sopra viene reso come pura struttura, pronta per i tuoi stili. Stilizza gli hook — .button, .text-input, .label, .field — nel tuo foglio di stile, aggiungi utility Tailwind tramite className, oppure collega un tema pronto:

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

Passo 5 — Guarda tutto in funzione

App di esempio Next.js è il catalogo completo stilizzato e dimostrato, con e2e Playwright e una baseline axe-core:

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

Prossimi passi

Temi — cambio a runtime con l'helper theme-picker per React.
Helper delle preferenze — lingua e dimensione del testo.
Catalogo dei componenti — proprietà, ARIA e tastiera per ogni componente.

Domande lungo la strada? La pagina di aiuto è piena di risposte — e se un passo può essere più chiaro, faccelo sapere e miglioreremo volentieri il tutorial.