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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/introduction.md.
Leaf UI
  • English

      • Introduction

      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 startedExplore components

      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.

      • Chrome≥ 109
      • Edge≥ 109
      • Firefox≥ 121
      • Safari≥ 16.4

      These are minimum support targets. See browser compatibility for tested environments and fallbacks, or server-side rendering for Next.js, TanStack Start, and other frameworks.

      Start with one component

      Install the library in an existing React project:

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

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

      Next steps