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

81 个 React 组件 · 开箱即用，随你定制

# Leaf UI让好想法，长成好界面。

轻盈、好用、随你定制的 React 组件库。
从按钮到表单，细节已经就位，接下来随你发挥。

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

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

![](/leaf-ui/v/0.6.0/package-managers/yarn.svg)Yarn

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

![](/leaf-ui/v/0.6.0/package-managers/bun.svg)Bun

$`pnpm add @ifhover/leaf-ui`

React 18 / 19 · TypeScript · CSS Variables

组件工作台文件

### 按你的节奏

从一点简单的设置开始。

*你的邮箱

只用来接收重要的项目消息。

*你的角色

接受伙伴的协作邀请

项目预算

轻量适中充足

协作消息邮件

**项目通知**在协作消息中接收进展

应用设置重置

**Leaf Studio **好想法，一起完成。

1D7D1M1Y

**12**个新想法

**8**位伙伴

+18%

J

Jamie 分享了新的灵感刚刚 · 品牌方向

S

Sam 完成了第一个原型20 分钟前 · 产品设计

### 每一步，都安心。

输入验证码，开始你的下一段旅程。

432

没有收到验证码？重新发送

你的创作空间

### 给好想法一点空间。

和伙伴一起，把下一个产品做好。

创建你的空间

AJS

8 位伙伴，已经在路上

找到同频的伙伴

**设计伙伴**把灵感变成作品

**独立创造者**一步步，做点不同

**好想法，记下来。**

保存当前设置，继续下一步。

保存更改暂时放下

 Leaf Studio真实组件 · 可以操作

SStudio一起，把想法做好

WORKSPACE

我的项目

收件箱

小小的细节，组成每天顺手的体验。

AAlex Morgan

你的下一个好想法

## 给灵感一点空间。

试试完成任务、切换筛选，或创建一项新任务。

新任务

全部进行中已完成

4 项

- 把好想法变成第一个原型LEAF-001设计
- 让每一次交互都有回应LEAF-002设计
- 照顾键盘和小屏幕上的体验LEAF-003开发
- 和团队分享这一次进展LEAF-004协作

再记一个好想法

AJS

和 3 位伙伴一起推进刚刚更新

### 一点点，也算进展

25%

已完成 1 项，共 4 项

当前项目

进度提醒

YOUR CREATIVE SPACE

## 好想法，都放在这里。

预览文件，管理项目资料。

- Brand direction.pdf

PDF2.4 MB上传完成
- Product notes.md

MD18 KB待上传
- Studio assets.zip

ZIP7.8 MB上传中 64%

## 交互顺手，细节到位。

清楚的状态反馈、自然的动效、完整的键盘操作。常用的交互，已经替你照顾好。

## 你的品牌，自有风格。

从主题色、圆角到深浅外观，几处设置就能融入你的产品。默认好看，也经得起定制。

## 常用参数，只设一次。

按钮样式、输入提示、弹窗防误关，一处配置，全站沿用。省去重复传参，个别组件仍可单独调整。

[了解组件默认值](/leaf-ui/v/0.6.0/components/config-provider.html#组件默认值)

MAKE IT YOURS

## 同一套组件，你的风格。

颜色、圆角、外观和动效，都可以按产品的节奏调整。

[了解主题定制](/leaf-ui/v/0.6.0/guide/theming.html)

LIVE PREVIEW实时预览

YOUR WORKSPACE

### 找到适合你的节奏。

从小小的交互开始，构建属于你的界面。

项目提醒

创建你的项目重新开始

L为下一个好想法，留一点空间。

主要按钮Solid

描边按钮Outline

危险操作Danger

文字按钮Ghost

### 你的风格，你来定义

重置

几个设置，就能长成你喜欢的样子。

密度舒适紧凑主题色Primary color**#20834A

交互动效

圆角Border radius10px

利落圆润

外观Appearance浅色深色

主题代码theme.tsx复制代码

YOUR NEXT GOOD IDEA

## 从一个细节，做到整个产品。

表单、导航、反馈、数据展示。一起，把界面做好。

[查看全部组件](/leaf-ui/v/0.6.0/components/index.html)

Leaf UI

清晰的设计，自然的交互。

Built with React & Rspress