For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/guide/introduction.md.
Leaf UI
  • 简体中文

      • 认识 Leaf UI

      Leaf UI

      轻盈 · 自然 · 可定制

      一套为 React 应用准备的 UI 组件。以绿色为起点，让界面清晰自然，也保留你的品牌个性。

      React 18 / 19TypeScriptSSRESM / CommonJS
      开始使用探索组件

      为什么选择 Leaf UI

      轻盈自然

      克制的色彩、舒适的圆角与清晰的交互状态，让内容成为主角。开箱即用，也为你的设计留出空间。

      你的主题，你的风格

      颜色、圆角、控件高度、字体和明暗外观，都可以通过 ConfigProvider 调整。支持嵌套区域主题，浮层与消息沿用所在区域的配置。

      熟悉的 React 用法

      提供 TypeScript 类型，保留原生 HTML 属性与 DOM ref。支持受控与非受控用法，表单仍可使用原生提交和 FormData。

      日常所需，保持一致

      从按钮、输入框到日期选择、表格、导航和反馈，使用一致的尺寸与交互规则。图标采用 Lucide，也支持传入自己的图标节点。

      面向不同语言

      内置多种语言资源，支持自定义翻译、语言回退与 RTL 方向。组件文案由配置管理，业务标题和字段标签由应用自行翻译。

      照顾每一次交互

      键盘操作、可见焦点、禁用与加载状态贯穿组件，并响应减少动态效果的系统偏好。为仅含图标的按钮提供 aria-label，即可补充可访问名称。

      环境支持

      支持 React 18 / 19，提供 ESM / CommonJS 入口与服务端渲染用法。推荐使用现代浏览器当前或上一代稳定版。

      • Chrome≥ 109
      • Edge≥ 109
      • Firefox≥ 121
      • Safari≥ 16.4

      以上为最低支持目标，实际验证范围与降级策略见浏览器兼容性。Next.js、TanStack Start 等框架的接入见服务端渲染。

      从一个组件开始

      在已有 React 项目中安装：

      pnpm add @ifhover/leaf-ui

      直接导入组件即可使用，浏览器构建会自动加载所需样式，无需安装 Sass。试着点击下面的按钮：

      getting-started.tsx
      import { Button } from '@ifhover/leaf-ui';

import { useState } from 'react';

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

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

      接下来