Tutorial React — Lily Design System

Apa yang akan anda bina

Borang hubungan kecil — input berlabel, butang hantar, keadaan terkawal, tingkah laku papan kekunci dan pembaca skrin yang sebenar — mula-mula kosong, kemudian digayakan, dalam kira-kira 10 minit.

Sebelum anda bermula

Anda memerlukan git, Node 22 atau lebih baharu, dan pnpm 10 atau lebih baharu. Mana-mana projek React 18+ boleh digunakan — Next.js, Vite atau React biasa.

Langkah 1 — Dapatkan kod

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

Komponen ialah fail rata dalam components/ — Button.tsx, TextInput.tsx — masing-masing dengan ujian, story dan dokumennya di sebelah. Salin fail yang anda perlukan ke aplikasi anda, atau vendor repo dan import daripadanya.

Langkah 2 — Komponen pertama anda

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

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

Memaparkan <button class="button" type="button">. Prop: type, disabled, pressed (memaparkan aria-pressed), label ( aria-label penggantian), className, dan sebarang atribut tambahan ditabur pada elemen akar.

Langkah 3 — Gubah borang kecil

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 mengambil label sebagai propnya sendiri dan bukannya komponen label bersarang — hantar sekali, pada Field, dan TextInputyang sepadan pada label membekalkan nama boleh diakses.

Disahkan 2026-08-29: draf awal menyarangkan komponen Label di dalam Field, yang memaparkan dua label (satu kosong) kerana Field sudah memaparkan labelnya sendiri daripada label prop — dikesan dengan mengkompil serpihan tepat itu. laluan borang hubungan gubahan ialah corak yang sama, diuji dengan e2e dan ujian axe sebenar.

Langkah 4 — Gayakan

Segala-galanya di atas dipaparkan sebagai struktur tulen, sedia untuk gaya anda. Gayakan cangkuk — .button, .text-input, .label, .field — dalam helaian gaya anda, lapiskan utiliti Tailwind melalui className, atau pautkan tema siap pakai:

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

Langkah 5 — Lihat semuanya berfungsi

Aplikasi contoh Next.js ialah katalog penuh yang digayakan dan didemonstrasikan, dengan e2e Playwright dan garis dasar 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

Langkah seterusnya

Tema — penukaran runtime dengan pembantu React theme-picker.
Pembantu keutamaan — bahasa dan saiz teks.
Katalog komponen — prop, ARIA dan papan kekunci bagi setiap komponen.

Ada soalan di sepanjang jalan? halaman bantuan penuh dengan jawapan — dan jika sesuatu langkah boleh dijelaskan lagi, beritahu kami dan kami dengan senang hati akan memperbaiki tutorial.