Lily Design System™

Tutoriel React

Composants fonction typés, un fichier chacun, contrôlés avec le motif standard value + onChange — tout fonctionne comme React le fait déjà.

Ce que vous allez construire

Un petit formulaire de contact — champ avec étiquette, bouton d'envoi, état contrôlé, vrai comportement clavier et lecteur d'écran — d'abord nu, puis stylé, en 10 minutes environ.

Avant de commencer

Il vous faut git, Node 22 ou plus récent et pnpm 10 ou plus récent. Tout projet React 18+ convient — Next.js, Vite ou React simple.

Étape 1 — Récupérer le code

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

Les composants sont des fichiers à plat dans components/ — Button.tsx, TextInput.tsx — chacun avec son test, sa story et sa documentation à côté. Copiez les fichiers dont vous avez besoin dans votre application, ou ramenez le dépôt et importez depuis celui-ci.

Étape 2 — Votre premier composant

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

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

Rend <button class="button" type="button">. Props : type, disabled, pressed (rend aria-pressed), label (un aria-label pour remplacer), className, et tout attribut supplémentaire est répandu sur l'élément racine.

Étape 3 — Composer un petit formulaire

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 prend le label comme sa propre prop plutôt qu'un composant d'étiquette imbriqué — transmettez-la une fois, sur Fieldet TextInputcorrespondant de label fournit le nom accessible.

Vérifié le 2026-08-29 : un brouillon précédent imbriquait un composant Label à l'intérieur de Field, ce qui rendait deux étiquettes (une vide) parce que Field rend déjà la sienne à partir de l'entrée label prop — découvert en compilant l'extrait exact. La route La route composée du formulaire de contact suit le même motif, éprouvé par de vrais tests e2e et axe.

Étape 4 — Le styler

Tout ce qui précède est rendu comme de la structure pure, prête pour vos styles. Stylez les crochets — .button, .text-input, .label, .field — dans votre feuille de style, superposez des utilitaires Tailwind via className, ou liez un thème prêt à l'emploi : 

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

Étape 5 — Voir le tout fonctionner

L'application d'exemple Next.js est le catalogue complet stylé et démontré, avec Playwright e2e et une référence 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

Étapes suivantes

Des questions en chemin ? La page d'aide regorge de réponses — et si une étape peut être plus claire, dites-le-nous et nous améliorerons volontiers le tutoriel.