Leva Controls

Leva is a hooks-based GUI for React that is used to display controls during development. When developing inside Triplex you're able to get a similar experience as Leva with the added benefit of keeping your components portable.

Take a standard Leva config inside a component:

const { color, isEnabled, scale } = useControls({
  color: "#fff",
  isEnabled: false,
  scale: 4,

You can instead represent this config as props your component takes.

interface Props {
  color: string;
  isEnabled: boolean;
  scale: number;
export function Component({
  color = "#fff",
  isEnabled = false,
  scale = 4,
}: Props);

Which are then able to have their values be changed in its Component Controls.


Similar to Leva, props can have values be constrained by using JSDoc tags. Take a Leva config that sets constraints on the scale value.

  scale: {
    value: 4,
    min: 0,
    max: 10,
    step: 1,

You can instead represent these constraints as JSDoc tags on your prop.

interface Props {
   * @min 0
   * @max 10
   * @step 1
  scale: number;

For an exhaustive list of tags see Declaring Props.

Complex props

Complex props such as tuples are also supported. Take a Leva config that declares a number tuple;

  boxSize: [10, 20],

You can instead represent this as a tuple prop.

interface Props {
  boxSize: [number, number];

For an exhaustive list of types that are supported see Declaring Props.