Lily Design System™

React ट्यूटोरियल

टाइप किए हुए फ़ंक्शन घटक, एक-एक फ़ाइल, मानक पैटर्न से नियंत्रित value + onChange — सब कुछ वैसे ही काम करता है जैसे React पहले से करता है।

आप क्या बनाएँगे

एक छोटा संपर्क फ़ॉर्म — लेबल वाला क्षेत्र, सबमिट बटन, नियंत्रित स्थिति, असली कीबोर्ड और स्क्रीन-रीडर व्यवहार — पहले सादा, फिर शैलीबद्ध, लगभग 10 मिनट में।

शुरू करने से पहले

आपको git, Node 22 या नया, और pnpm 10 या नया चाहिए। कोई भी React 18+ प्रोजेक्ट चलेगा — Next.js, Vite या सादा React।

चरण 1 — कोड प्राप्त करें

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

घटक यहाँ सपाट फ़ाइलों के रूप में हैं: components/ — Button.tsx, TextInput.tsx — हर एक के बग़ल में उसका परीक्षण, story और दस्तावेज़। जो फ़ाइलें चाहिए उन्हें अपने ऐप में कॉपी करें, या रेपो ले आएँ और उससे आयात करें।

चरण 2 — आपका पहला घटक

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

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

यह दिखाता है <button class="button" type="button">। Props: type, disabled, pressed (दिखाता है aria-pressed), label (एक aria-label अधिलेखित करने के लिए), className, और कोई भी अतिरिक्त गुण मूल तत्व पर फैल जाता है।

चरण 3 — एक छोटा फ़ॉर्म बनाएँ

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 दिखने वाले label अपने prop के रूप में, भीतर रखे लेबल घटक के रूप में नहीं — इसे एक बार दें, पर Fieldऔर TextInputका label सुलभ नाम देता है।

2026-08-29 को सत्यापित: पिछले मसौदे ने अलग Label के भीतर Fieldके भीतर रखा था, जिससे दो लेबल (एक खाली) दिखे क्योंकि Field पहले से अपना label prop — सटीक टुकड़े को कंपाइल करके पता चला। रूट संयुक्त संपर्क-फ़ॉर्म रूट वही पैटर्न है, असली e2e और axe परीक्षणों से परखा हुआ।

चरण 4 — इसे शैली दें

ऊपर का सब कुछ शुद्ध संरचना के रूप में रेंडर होता है, आपकी शैलियों के लिए तैयार। हुक को शैली दें — .button, .text-input, .label, .field — अपनी स्टाइलशीट में, इसके माध्यम से Tailwind यूटिलिटी की परत चढ़ाएँ className, या कोई तैयार थीम लिंक करें: 

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

चरण 5 — सब कुछ चलते हुए देखें

Next.js उदाहरण ऐप पूरा कैटलॉग शैली और प्रदर्शन के साथ है, Playwright e2e और 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

अगले चरण

रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।