This fork

Published as @vladik.xyz/leva (the upstream leva name isn't ours to publish under). Same API — code still does import { useControls } from 'leva'; consumers alias it in package.json:

"leva": "npm:@vladik.xyz/leva@^0.10.4"

npm i @vladik.xyz/leva

What's different from pmndrs/leva

• Resizable panel + folder search — drag the panel's edge to resize; a search box filters the control tree by label.
• localStorage persistence — panel position/size/collapsed-folder state survives a reload.
• Folder search auto-expands matches — a match nested inside a collapsed folder used to render but stay hidden behind maxHeight: 0. Folders now force-open while a filter is active and restore their prior collapsed state once it clears.
• buttonGroup improvements — an optional activePath (dot-path to a sibling store value) highlights whichever button's key matches, styled like button()'s accent fill (stock buttonGroup had no notion of "currently selected"). Also fixed label truncation: a buttonGroup with a label reused the standard auto $controlWidth row grid (a fixed 160px control column), so long option words (e.g. "orthographic") overflowed past that column and visually overlapped the label instead of the label ellipsizing. The control column is now sized to its own content (max-content); the label column shrinks into whatever's left and ellipsizes as expected.
• Number input: small and long values — getStep's floor went from 1e-3 to 1e-6 so sliders with sub-millesimal ranges (e.g. min:0 max:0.01) auto-derive a real step instead of clamping; the auto-pad decimal cap went from 2 to 6 so those steps actually render instead of collapsing to "0.00". The number column also widens past its default 4-character width once the displayed value needs more.

🚧🚧 This repo is under heavy development 🚧🚧

Features

• ⭐️ Beautiful by default
• 🎚 More than 12 different kinds of inputs available
• 🧐 Smart input type recognition
• 🔌 Easy-to-make plugins
• ✅ Keyboard accessible
• ⚡️ No setup necessary

Installation

npm i leva

Quick start

Simply call the useControls hook from anywhere in your app:

import { useControls } from 'leva'

function MyComponent() {
  const { name, aNumber } = useControls({ name: 'World', aNumber: 0 })

  return (
    <div>
      Hey {name}, hello! {aNumber}
    </div>
  )
}

NOTE: Using Leva with React 18 will cause a console error about createRoot which you can safely ignore, or fix by following the instructions here: discussion

Documentation

• Getting Started

• Inputs

• Configuration

• Styling

• Advanced: Controlled Inputs

• Advanced: Creating Plugins

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!