Leaf UI
  • English
      • 41 components, growing together

      For your interface,
      a touch of nature.

      Lightweight React components. A natural design language.
      A comfortable home for every good idea.

      Get startedExplore components
      pnpm add @sudden3/leaf-ui
      React 18 / 19 · TypeScript · CSS Variables
      It all starts here···
      GROW AT YOUR OWN PACE

      Plant ideas in your interface.

      Simple components for ideas with possibilities.

      Thoughtful details
      Your brand, your colors
      A LITTLE LEAF. A LOT OF POSSIBILITY.
      01

      Lightweight, natural

      Calm visuals and thoughtful details. Give your content room to breathe.

      02

      Make it yours

      Choose your colors, shapes and sizes to express your design.

      03

      Made for React

      TypeScript types and familiar HTML properties fit your React workflow.

      MAKE IT YOURS

      Natural, with your personality.

      Change colors and corners to make Leaf UI fit your product.

      Explore theming
      LIVE PREVIEWLive preview
      LESS, BUT BETTER

      A little green. Many possibilities.

      Start small and build your own interface.

      LMake room for the next good idea.
      Solid
      Soft
      Outline
      Ghost

      Your style, your choice

      A few settings shape the look you want.

      Primary colorPrimary color
      SharpRounded
      AppearanceAppearance
      CompactSpacious
      theme.tsx
      import { Button, ConfigProvider } from '@sudden3/leaf-ui';

<ConfigProvider theme={{
  primaryColor: '#20834a',
  borderRadius: 10,
  controlHeight: 34,
  appearance: 'light',
}}>
  <Button>Save</Button>
</ConfigProvider>
      SMALL START. THOUGHTFUL DETAILS.

      Grow from everyday forms.

      Consistent controls and calm interactions, with care in every detail.

      Explore components