Tutorial sa React — Lily Design System

Ang bubuuin mo

Isang maliit na contact form — input na may label, submit button, kontroladong state, tunay na gawi ng keyboard at screen reader — una ay hubad, pagkatapos ay may istilo, sa humigit-kumulang 10 minuto.

Bago ka magsimula

Kailangan mo ng git, Node 22 o mas bago, at pnpm 10 o mas bago. Gumagana ang anumang proyektong React 18+ — Next.js, Vite, o payak na React.

Hakbang 1 — Kunin ang 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

Ang mga component ay mga flat na file sa components/ — Button.tsx, TextInput.tsx — bawat isa ay may test, story, at mga dokumento sa tabi nito. Kopyahin ang mga file na kailangan mo sa iyong app, o i-vendor ang repo at mag-import mula rito.

Hakbang 2 — Ang una mong component

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

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

Nagre-render ng <button class="button" type="button">. Mga prop: type, disabled, pressed (nagre-render ng aria-pressed), label (isang aria-label override), className, at anumang dagdag na attribute ay kumakalat sa root element.

Hakbang 3 — Bumuo ng maliit na form

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 ay kumukuha ng nakikitang label bilang sarili nitong prop sa halip na nested na label component — ipasa ito nang isang beses, sa Field, at TextInputsa label ay nagbibigay ng accessible na pangalan.

Napatunayan noong 2026-08-29: nag-nest ang naunang draft ng hiwalay na Label sa loob ng Field, na nagre-render ng dalawang label (isang walang laman) dahil Field ay nagre-render na ng sarili nito mula sa label prop — nahuli sa pamamagitan ng pag-compile ng eksaktong snippet. Ang composed na ruta ng contact-form ay parehong pattern, sinubukan ng tunay na e2e at axe na pagsusuri.

Hakbang 4 — Bigyan ng istilo

Lahat ng nasa itaas ay nagre-render bilang purong istruktura, handa para sa iyong mga istilo. Bigyan ng istilo ang mga hook — .button, .text-input, .label, .field — sa iyong stylesheet, patungan ng mga utility ng Tailwind sa pamamagitan ng className, o mag-link ng handa nang tema:

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

Hakbang 5 — Tingnan ang lahat na gumagana

Ang Next.js na halimbawang app ay ang buong catalog na may istilo at demo, na may Playwright e2e at 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

Mga susunod na hakbang

Theming — runtime na pagpapalit gamit ang React theme-picker helper.
Mga preference helper — wika at laki ng teksto.
Catalog ng component — mga prop, ARIA, at keyboard para sa bawat component.

May mga tanong habang nasa daan? Ang pahina ng tulong ay puno ng mga sagot — at kung maaaring maging mas malinaw ang isang hakbang, sabihin sa amin at masaya naming pagbubutihin ang tutorial.