> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/guide/getting-started.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 支持 React 18 与 React 19。安装后即可在 React 页面中使用，基础样式与组件样式会自动加载。

## 安装组件包

在你的 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
```

React 和 React DOM 由你的应用提供。如果项目尚未安装，请先执行 `pnpm add react react-dom`。可在 [npm](https://www.npmjs.com/package/@ifhover/leaf-ui) 查看最新版本。

浏览器打包时，组件入口会自动加载主题变量、公共样式与所需的组件和服务样式，无需手动导入 CSS 或安装 Sass。Next.js、TanStack Start 等框架的额外配置见[服务端渲染](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/ssr.md)。

示例通过 Flex、Space、Grid 和 FormField 组织布局，无需安装 Tailwind CSS。

## 使用组件

直接从 `@ifhover/leaf-ui` 导入组件，添加内容和事件即可：


已点击 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>;
}
```

展开代码

根入口是推荐的默认写法。在 Vite、Rsbuild / Rspack 的生产构建中，具名导入会按需保留组件及其内部依赖的样式，无需改用组件子路径。直接使用 esbuild 打包时，它会保留根入口遍历到的 CSS；此时可使用 `@ifhover/leaf-ui/button` 等子路径缩小样式体积。

## 接下来

- [组件总览](https://ifhover.github.io/leaf-ui/v/0.6.0/components/index.md)：浏览可用组件。
- [Button 按钮](https://ifhover.github.io/leaf-ui/v/0.6.0/components/button.md)：查看样式、尺寸、加载状态与完整 API。
- [使用图标](https://ifhover.github.io/leaf-ui/v/0.6.0/components/icons.md)：通过 Lucide 图标表达操作。
- [定制主题](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/theming.md)：设置主题色、圆角和深色模式。
- [服务端渲染](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/ssr.md)：Next.js、TanStack Start 等框架的额外配置。
- [浏览器兼容性](https://ifhover.github.io/leaf-ui/v/0.6.0/guide/compatibility.md)：查看支持的浏览器与降级策略。