https://github.com/pmndrs/leva

🌋 React-first components GUI
https://github.com/pmndrs/leva

gui react

Last synced: 3 days ago
JSON representation

🌋 React-first components GUI

• Host: GitHub
• URL: https://github.com/pmndrs/leva
• Owner: pmndrs
• License: mit
• Created: 2020-11-07T19:01:17.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-08-17T15:23:13.000Z (4 months ago)
• Last Synced: 2024-10-29T10:27:07.784Z (about 1 month ago)
• Topics: gui, react
• Language: TypeScript
• Homepage: https://leva.pmnd.rs
• Size: 9.37 MB
• Stars: 4,991
• Watchers: 30
• Forks: 198
• Open Issues: 129
• Metadata Files:
  • Readme: README.md
  • Contributing: contributing.md
  • License: LICENSE
  • Code of conduct: code_of_conduct.md

Awesome Lists containing this project

• awesome - pmndrs/leva - 🌋 React-first components GUI (TypeScript)
• awesome-game-engine-dev - Leva - React-first components gui. (Libraries / JavaScript)
• awesome-github-star - leva - first components GUI | pmndrs | 4150 | (TypeScript)
• stars - pmndrs/leva - 🌋 React-first components GUI (TypeScript)
• awesome-list - leva - first components GUI | pmndrs | 1671 | (TypeScript)
• awesome-react-three-fiber - leva

README

        
[![npm (tag)](https://img.shields.io/npm/v/leva?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/leva) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/leva?style=flat&colorA=000000&colorB=000000&label=gzipped)](https://bundlephobia.com/result?p=leva) ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/pmndrs/leva/CI?style=flat&colorA=000000) [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=&logo=discord&logoColor=ffffff)](https://discord.gg/poimandres)






A GUI you are going to lava.

 Customizable, extensible and beautiful by default.






Storybook 








  by Poimandres






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

```bash

npm i leva

```

### Quick start

Simply call the `useControls` hook from anywhere in your app:

```jsx

import { useControls } from 'leva'

function MyComponent() {

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

  return (

    


      Hey {name}, hello! {aNumber}

    

  )

}

```


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](https://github.com/pmndrs/leva/issues/358)

### Documentation

- [Getting Started](/docs/getting-started.md)

- [Inputs](/docs/inputs.md)

- [Configuration](/docs/configuration.md)

- [Styling](/docs/styling.md)

- [Advanced: Controlled Inputs](/docs/advanced/controlled-inputs.md)

- [Advanced: Creating Plugins](/docs/advanced/creating-plugins.md)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Andrew Prifer
🤔 💻

    
Aria
🤔

    
David Bismut
🤔 💻

    
Dmitry Ivakhnenko
💻

    
Gianmarco
🤔 💻

    
Guido Vizoso
💻

    
Han
🎨

  

  

    
Ivan Rossi
🐛

    
Laurin Quast
💻 🤔

    
Marco Fugaro
🤔

    
Marco Ludovico Perego
🤔

    
Piotr Monwid-Olechnowicz
📖

    
clementcassajus
🎨

    
thephoenixofthevoid
🐛

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!