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

81 React components · Ready to make your own

# Leaf UIGood ideas deserve great interfaces.

A lightweight React component library that feels right at home.
From buttons to forms, the details are ready. Make something of your own.

[Start building](/leaf-ui/v/0.6.0/en/guide/getting-started.html)[Explore components](/leaf-ui/v/0.6.0/en/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

ComponentsWorkspaceFiles

### Make it yours

Start with a few simple preferences.

*Your email

Only the project updates that matter.

*Your role

Allow collaboration invites

Project budget

SmallMediumLarge

ChatsEmails

**Project notifications**Updates in your team chat

Apply settingsReset

**Leaf Studio **Good ideas, made together.

1D7D1M1Y

**12**new ideas

**8**teammates

+18%

J

Jamie shared a new ideaJust now · Brand direction

S

Sam finished the first prototype20 min ago · Product design

### One step closer.

Enter your code to start something good.

432

Didn’t get a code?Resend

YOUR CREATIVE SPACE

### Room for a good idea.

Make your next product together.

Create your space

AJS

8 teammates, already on their way

FIND YOUR PEOPLE

**Design circle**Ideas into experiences

**Indie makers**Make something different

**Keep that good idea.**

Save your changes and keep going.

Save changesDiscard

 Leaf StudioReal components · Try it

SStudioMake good ideas happen

WORKSPACE

My project

Inbox

Small details make the everyday feel effortless.

AAlex Morgan

YOUR NEXT GOOD IDEA

## Room for your next idea.

Complete a task, switch filters, or create something new.

New task

All tasksIn progressDone

4 items

- Turn a good idea into a first prototypeLEAF-001Design
- Give every interaction a responseLEAF-002Design
- Make room for keyboards and small screensLEAF-003Build
- Share this progress with the teamLEAF-004Team

Add one more good idea

AJS

Moving forward with 3 teammatesUpdated just now

### A little progress counts

25%

1 of 4 tasks completed

Current project

Progress reminders

YOUR CREATIVE SPACE

## A home for every good idea.

Preview files and keep project materials together.

- Brand direction.pdf

PDF2.4 MBUpload complete
- Product notes.md

MD18 KBReady
- Studio assets.zip

ZIP7.8 MBUploading 64%

## Small details. Smoother interactions.

Clear feedback, natural motion and keyboard support. The everyday interactions are taken care of.

## Your brand. Your style.

Make it yours with colors, corners and light or dark themes. Start with thoughtful defaults and adapt them to your product.

## Set it once. Use it everywhere.

Share button styles, input hints and modal closing behavior across your app. Skip repeated props and override individual components when needed.

[Explore component defaults](/leaf-ui/v/0.6.0/en/components/config-provider.html#component-defaults)

MAKE IT YOURS

## The same components. Your own style.

Tune colors, corners, appearance and motion to the rhythm of your product.

[Explore theming](/leaf-ui/v/0.6.0/en/guide/theming.html)

LIVE PREVIEWLive preview

YOUR WORKSPACE

### Find your own rhythm.

Start small and build your own interface.

Project reminders

Create your projectStart again

LMake room for the next good idea.

PrimarySolid

OutlineOutline

DangerDanger

GhostGhost

### Your style, your choice

Reset

A few settings shape the look you want.

DensityComfortableCompactPrimary colorPrimary color**#20834A

Interaction motion

RadiusBorder radius10px

SharpRounded

AppearanceAppearanceLightDark

Theme codetheme.tsxCopy code

YOUR NEXT GOOD IDEA

## Start with a detail. Build the whole product.

Forms, navigation, feedback and data. Bring a thoughtful interface together.

[Explore all components](/leaf-ui/v/0.6.0/en/components/index.html)

Leaf UI

Clear design. Natural interaction.

Built with React & Rspress