> 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/getting-started.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.

# Installation & quick start

Leaf UI supports React 18 and React 19. Install the package to start using components; base and component styles load automatically.

## Install the package

Run this in your React project directory:

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

React 18 or 19 and the matching React DOM version must be installed in your application. If needed, run `pnpm add react react-dom`. See the current release on [npm](https://www.npmjs.com/package/@ifhover/leaf-ui).

Browser component entries load theme variables, shared styles and the required component and service styles automatically. No manual CSS imports or Sass installation are needed. See [server-side rendering](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/ssr.md) for framework-specific setup in Next.js, TanStack Start and other frameworks.

Examples use Flex, Space, Grid and FormField for layout. Tailwind CSS is not required.

## Use a component

Import components directly from `@ifhover/leaf-ui` and add content and events:


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

The root entry is the recommended default. Vite and Rsbuild / Rspack production builds retain styles for named imports and their internal dependencies on demand; component subpaths are optional. Direct esbuild bundles retain CSS traversed through the root entry. In that case, use subpaths such as `@ifhover/leaf-ui/button` to reduce stylesheet size.

## Next steps

- [Components](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/index.md): explore available components.
- [Button](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/button.md): styles, sizes, loading states and API.
- [Icons](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/icons.md): use Lucide icons for actions.
- [Theming](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/theming.md): customize colors, shapes and appearance.
- [Server-side rendering](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/ssr.md): framework-specific setup in Next.js, TanStack Start and other frameworks.
- [Browser compatibility](https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/compatibility.md): supported browsers and fallbacks.