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/index.md.
Leaf UI
  • English
      • 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 buildingExplore components
      pnpm add @ifhover/leaf-ui
      React 18 / 19 · TypeScript · CSS Variables

      Make it yours

      Start with a few simple preferences.

      Only the project updates that matter.
      Leaf Studio Good ideas, made together.
      12new ideas
      8teammates
      +18%

      Jamie shared a new ideaJust now · Brand direction

      Sam finished the first prototype20 min ago · Product design

      One step closer.

      Enter your code to start something good.

      Didn’t get a code?

      YOUR CREATIVE SPACE

      Room for a good idea.

      Make your next product together.

      8 teammates, already on their way
      FIND YOUR PEOPLE

      Design circleIdeas into experiences

      Indie makersMake something different

      Keep that good idea.

      Save your changes and keep going.

      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
      MAKE IT YOURS

      The same components. Your own style.

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

      Explore theming
      LIVE PREVIEWLive preview
      YOUR WORKSPACE

      Find your own rhythm.

      Start small and build your own interface.

      Project reminders
      Make room for the next good idea.
      Solid
      Outline
      Danger
      Ghost

      Your style, your choice

      A few settings shape the look you want.

      Density
      Primary colorPrimary color
      Interaction motion
      SharpRounded
      AppearanceAppearance
      theme.tsx
      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