> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/guide/introduction.html

> 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.

# 认识 Leaf UI


![](/leaf-ui/v/0.6.0/leaf.svg)

Leaf UI

轻盈 · 自然 · 可定制

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

React 18 / 19TypeScriptSSRESM / CommonJS

[开始使用](/leaf-ui/v/0.6.0/guide/getting-started.html)[探索组件](/leaf-ui/v/0.6.0/components/index.html)

## 为什么选择 Leaf UI


### 轻盈自然

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

### 你的主题，你的风格

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

### 熟悉的 React 用法

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

### 日常所需，保持一致

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

### 面向不同语言

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

### 照顾每一次交互

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

## 环境支持

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


- ![](/leaf-ui/v/0.6.0/browsers/chrome.svg)Chrome≥ 109
- ![](/leaf-ui/v/0.6.0/browsers/edge.svg)Edge≥ 109
- ![](/leaf-ui/v/0.6.0/browsers/firefox.svg)Firefox≥ 121
- ![](/leaf-ui/v/0.6.0/browsers/safari.svg)Safari≥ 16.4


以上为最低支持目标，实际验证范围与降级策略见[浏览器兼容性](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/compatibility.md)。Next.js、TanStack Start 等框架的接入见[服务端渲染](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/ssr.md)。

## 从一个组件开始

在已有 React 项目中安装：

```bash
npm install @ifhover/leaf-ui
```
```bash
yarn add @ifhover/leaf-ui
```
```bash
pnpm add @ifhover/leaf-ui
```
```bash
bun add @ifhover/leaf-ui
```

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


已点击 0 次

getting-started.tsx

复制代码

```tsx lineNumbers file="../../src/examples/guide/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>;
}

```

展开代码

## 接下来

- [安装与快速开始](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/getting-started.md)：了解安装方式与项目接入。
- [组件总览](https://ifhover.github.io/leaf-ui/v/0.6.0/components/index.md)：找到界面需要的组件。
- [定制主题](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/theming.md)：设置品牌色、圆角和深色模式。
- [切换语言](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/internationalization.md)：为应用配置组件语言。