41 个组件，持续生长

为你的界面，
添一抹自然。

轻盈的 React 组件，自然的设计语言。
让每一个好想法，都有舒适的表达。

开始使用探索组件

pnpm add @sudden3/leaf-ui

React 18 / 19 · TypeScript · CSS Variables

GROW AT YOUR OWN PACE

把灵感，种进界面。

简单的组件，装得下不简单的想法。

恰到好处的细节

你的品牌，你的颜色

A LITTLE LEAF. A LOT OF POSSIBILITY.

轻盈，自然

克制的视觉，恰好的细节。让内容成为主角，让交互自然发生。

随你而变

轻松调整主题色、圆角与尺寸，定义你的设计语言。

为 React 而生

完整的 TypeScript 类型，熟悉的原生属性，融入你的开发习惯。

MAKE IT YOURS

自然，也可以有你的个性。

换一种颜色，调一点圆角。看看 Leaf UI 如何融入你的产品。

了解主题定制

LIVE PREVIEW实时预览

LESS, BUT BETTER

一点绿意，很多可能。

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

Solid

Soft

Outline

Ghost

你的风格，你来定义

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

主题色Primary color

#20834A自定义

圆角Border radius10px

利落圆润

外观Appearance

控件高度Control height34px

紧凑宽松

theme.tsx

import { Button, ConfigProvider } from '@sudden3/leaf-ui';

<ConfigProvider theme={{
  primaryColor: '#20834a',
  borderRadius: 10,
  controlHeight: 34,
  appearance: 'light',
}}>
  <Button>保存</Button>
</ConfigProvider>

SMALL START. THOUGHTFUL DETAILS.

从日常表单，开始生长。

统一尺寸，轻盈交互。把每一个基础细节，都照顾好。

探索基础组件

为你的界面，添一抹自然。