- 🍃 安静克制 — 中性表面、细边框和轻阴影构成层次，交互反馈只改变颜色；覆盖输入、表单、布局、导航与反馈。
- 🎨 主题一致 — 通过 ConfigProvider 接入品牌色、明暗外观与紧凑密度，相关状态自动派生，支持区域主题与 CSS 变量。
- 🛡️ 类型完备 — 使用 TypeScript 编写，提供类型声明，保留原生 HTML 属性、DOM ref 与表单语义。
- 🌍 多语言 — 提供中英文文档，支持内置语言、自定义翻译、嵌套语言配置与 RTL 方向。
- ⌨️ 细致交互 — 支持键盘操作、焦点管理，以及系统的减少动态效果偏好。
- 📦 融入工程 — 兼容 React 18 / 19，提供 ESM、CommonJS 和 SSR 用法，组件样式可随生产构建按需保留。
支持 React 18 / 19、现代浏览器与服务端渲染。推荐使用浏览器当前或上一代稳定版。
 Chrome |
 Edge |
 Firefox |
 Safari |
|---|---|---|---|
| ≥ 109 | ≥ 109 | ≥ 121 | ≥ 16.4 |
以上为最低支持目标；各版本实测范围与功能降级见浏览器兼容性，Next.js 等框架的接入见 服务端渲染。
pnpm add @ifhover/leaf-ui使用 npm / Yarn / Bun
npm install @ifhover/leaf-ui
yarn add @ifhover/leaf-ui
bun add @ifhover/leaf-ui需要在应用中安装 react 和 react-dom。组件提供编译后的 CSS，无需安装 Sass。
import { Button, DatePicker } from '@ifhover/leaf-ui';
export default function App() {
return (
<>
<DatePicker aria-label="选择日期" />
<Button>开始使用</Button>
</>
);
}基础样式与所需的组件、服务样式会自动加载，无需手动导入 CSS。Vite、Rsbuild / Rspack 的生产构建支持根入口 ESM 具名导入的样式按需保留。直接使用 esbuild 或 CommonJS 时，可使用 @ifhover/leaf-ui/button 等子路径；自行管理 SSR 样式时可使用完整静态入口 @ifhover/leaf-ui/styles/all.css。
单行控件默认高度为 36px，小 / 大尺寸为 30 / 42px。更多示例见安装与快速开始。
使用 ConfigProvider 为应用或某个区域配置主题和语言：
import { ConfigProvider } from '@ifhover/leaf-ui';
import App from './App';
export default function Root() {
return (
<ConfigProvider locale="zh-CN" theme={{ primaryColor: '#1e964f', borderRadius: 8 }}>
<App />
</ConfigProvider>
);
}将 locale 改为 en-US 即可切换为英文；设置 theme.appearance 为 dark 可启用深色外观。嵌套配置继承未设置的选项，浮层和消息沿用所在区域的主题与语言。
了解定制主题 · ConfigProvider 主题与语言。
在应用目录安装 Leaf UI Skill，让 AI 按项目实际使用的版本查询组件 API：
npx skills add ifhover/leaf-ui --skill leaf-ui安装与使用见 AI 与 Skills。在线文档顶部也可切换已发布版本。
欢迎通过 Issues 反馈问题与建议，或提交 Pull Request。
本地开发、项目结构与构建说明见 开发文档；提交组件或使用文档改动前，请阅读 开发、版本与文档同步流程。