快速开始

安装组件包并引入样式后，就可以在 React 页面中使用 Leaf UI。

使用第一个组件

导入 Button，像原生按钮一样添加内容和事件：

交互预览第一个按钮

getting-started.tsx

import { Button } from '@sudden3/leaf-ui';
import '@sudden3/leaf-ui/styles.css';
import { useState } from 'react';

export function GettingStartedExample() {
  const [count, setCount] = useState(0);

  return <Button onClick={() => setCount((value) => value + 1)}>已点击 {count} 次</Button>;
}

样式只需在应用入口导入一次。如果多个页面使用组件，不必重复引入。

使用原生属性

组件保留原生 button 属性，例如 onClick、disabled、type、className 和 aria-*。

<Button type="submit" disabled={submitting}>
  提交表单
</Button>

Button 的默认类型为 button。在表单中提交数据时，请显式设置 type="submit"。

组合一个表单

按钮、输入框和选择器默认都是 34px 高。name、required 和表单提交沿用原生 HTML 行为，可以直接用 FormData 读取内容。

交互预览组合一个表单

form.tsx

import { Button, Input, Select } from '@sudden3/leaf-ui';
import { Plus } from 'lucide-react';
import { useId, useState } from 'react';

export function GettingStartedForm() {
  const id = useId();
  const [result, setResult] = useState('');
  return (
    <form
      style={{ display: 'grid', gap: 12, width: 'min(100%, 360px)' }}
      onSubmit={(event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        setResult(`已创建：${data.get('title')}`);
      }}
    >
      <label htmlFor={`${id}-title`}>项目名称</label>
      <Input id={`${id}-title`} name="title" required placeholder="例如：Leaf Garden" />
      <label htmlFor={`${id}-team`}>所属团队</label>
      <Select
        id={`${id}-team`}
        name="team"
        required
        placeholder="请选择团队"
        options={[
          { label: '设计团队', value: 'design' },
          { label: '产品团队', value: 'product' },
        ]}
      />
      <Button type="submit" startIcon={<Plus />}>
        创建项目
      </Button>
      <span aria-live="polite">{result}</span>
    </form>
  );
}

换一种颜色

在应用或需要定制的区域外包裹 ConfigProvider：

import { Button, ConfigProvider } from '@sudden3/leaf-ui';

<ConfigProvider theme={{ primaryColor: '#3264d9', borderRadius: 6 }}>
  <Button>保存</Button>
</ConfigProvider>

更多配置与样式复用见定制主题。使用 Next.js 等框架时，可阅读 SSR 使用。

接下来

组件总览：浏览可用组件。
Button 按钮：查看样式、尺寸、加载状态与完整 API。
使用图标：通过 Lucide 图标表达操作。
定制主题：实时调整颜色、圆角和外观。

#快速开始

#使用第一个组件

#使用原生属性

#组合一个表单

#换一种颜色

#接下来

快速开始

使用第一个组件

使用原生属性

组合一个表单

换一种颜色

接下来