#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:

npm

Yarn

pnpm

Bun

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

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

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>;
}

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: explore available components.
• Button: styles, sizes, loading states and API.
• Icons: use Lucide icons for actions.
• Theming: customize colors, shapes and appearance.
• Server-side rendering: framework-specific setup in Next.js, TanStack Start and other frameworks.
• Browser compatibility: supported browsers and fallbacks.