> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/introduction.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Introduction


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

Leaf UI

Lightweight · Natural · Customizable

A UI component library for React applications. Start with a natural green theme, then make room for your own brand and ideas.

React 18 / 19TypeScriptSSRESM / CommonJS

[Get started](/leaf-ui/v/0.6.0/en/guide/getting-started.html)[Explore components](/leaf-ui/v/0.6.0/en/components/index.html)

## Why Leaf UI


### A natural starting point

Quiet colors, comfortable corners, and clear interaction states keep the focus on your content. Ready to use, with room for your own design.

### Your theme, your style

Configure colors, radii, control heights, typography, and light or dark appearance with ConfigProvider. Nested themes, popups, and messages share the settings of their region.

### Familiar React patterns

TypeScript declarations, native HTML attributes, and DOM refs are included. Use controlled or uncontrolled values, native form submission, and FormData.

### Everyday components, in sync

Buttons, inputs, date pickers, tables, navigation, and feedback share consistent sizing and interaction rules. Use Lucide icons or pass your own icon nodes.

### Ready for different languages

Built-in locales, custom translations, language fallbacks, and RTL direction are supported. Configure component messages while keeping application titles and labels in your own translation system.

### Thoughtful interactions

Keyboard navigation, visible focus, disabled and loading states, and reduced-motion preferences are supported. Add an aria-label to icon-only buttons to give them an accessible name.

## Environment support

Supports **React 18 / 19**, **ESM / CommonJS**, and server-side rendering. We recommend the current or previous stable release of a modern browser.


- ![](/leaf-ui/v/0.6.0/browsers/chrome.svg)Chrome≥ 109
- ![](/leaf-ui/v/0.6.0/browsers/edge.svg)Edge≥ 109
- ![](/leaf-ui/v/0.6.0/browsers/firefox.svg)Firefox≥ 121
- ![](/leaf-ui/v/0.6.0/browsers/safari.svg)Safari≥ 16.4


These are minimum support targets. See [browser compatibility](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/compatibility.md) for tested environments and fallbacks, or [server-side rendering](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/ssr.md) for Next.js, TanStack Start, and other frameworks.

## Start with one component

Install the library in an existing React project:

```bash
npm install @ifhover/leaf-ui
```
```bash
yarn add @ifhover/leaf-ui
```
```bash
pnpm add @ifhover/leaf-ui
```
```bash
bun add @ifhover/leaf-ui
```

Import a component and start using it. Browser builds load the required styles automatically; you do not need Sass. Try the button below:


Clicked 0 times

getting-started.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/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)}>Clicked {count} times</Button>;
}

```

Expand code

## Next steps

- [Installation and quick start](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/getting-started.md): Set up the library in your project.
- [Component overview](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/index.md): Find the components your interface needs.
- [Theming](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/theming.md): Customize brand colors, corners, and dark mode.
- [Internationalization](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/internationalization.md): Configure component languages for your application.