#安装&快速开始

Leaf UI 支持 React 18 与 React 19。安装后即可在 React 页面中使用，基础样式与组件样式会自动加载。

#安装组件包

在你的 React 项目目录下执行：

npm

Yarn

pnpm

Bun

pnpm add @ifhover/leaf-ui

React 和 React DOM 由你的应用提供。如果项目尚未安装，请先执行 pnpm add react react-dom。可在 npm 查看最新版本。

浏览器打包时，组件入口会自动加载主题变量、公共样式与所需的组件和服务样式，无需手动导入 CSS 或安装 Sass。Next.js、TanStack Start 等框架的额外配置见服务端渲染。

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

#使用组件

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

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 等子路径缩小样式体积。

#接下来

• 组件总览：浏览可用组件。
• Button 按钮：查看样式、尺寸、加载状态与完整 API。
• 使用图标：通过 Lucide 图标表达操作。
• 定制主题：设置主题色、圆角和深色模式。
• 服务端渲染：Next.js、TanStack Start 等框架的额外配置。
• 浏览器兼容性：查看支持的浏览器与降级策略。