Inspector Panel

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use it to build the side panel of an editor: one panel per property group, stacked. The body is rows; a row is a label on the left and one or two fields on a two-column grid. Scrub Number Field and Color Opacity Field are made for it, and any other field fits. For the whole panel with a live preview, see the Effects inspector block.

import { InspectorPanel, InspectorRow, ScrubNumberField } from '@youj/react'

export function BlurPanel({ blur, onBlur }: { blur: number; onBlur: (blur: number) => void }) {
  return (
    <InspectorPanel title="Layer blur" enabled onEnabledChange={() => {}} onRemove={() => {}}>
      <InspectorRow label="Amount">
        <ScrubNumberField size="sm" aria-label="Amount" label="A" unit="px" min={0} value={blur} onValueChange={onBlur} />
      </InspectorRow>
    </InspectorPanel>
  )
}

The state is yours: enabled, visible and type are controlled, and open follows defaultOpen until you control it.

Reference

Propstitle, enabled, types, visible, onAdd, onRemove, open…

Props

InspectorPanel props
Prop	Type	Default
`title`Required	`string` The group's name. It names the section, and the remove button ("Remove Drop shadow").	–
`enabled`	`boolean` The checkbox in front of the title (controlled). Leave it out for no checkbox.	–
`onEnabledChange`	`(enabled: boolean) => void`	–
`types`	`InspectorPanelType[]` Turns the title into a menu of these kinds.	–
`type`	`string` The chosen kind's value.	–
`onTypeChange`	`(type: string) => void`	–
`visible`	`boolean` The eye's state (controlled): false is hidden. Leave it out for no eye.	–
`onVisibleChange`	`(visible: boolean) => void`	–
`onAdd`	`() => void` Shows a plus button.	–
`onRemove`	`() => void` Shows a trash button.	–
`actions`	`ReactNode` Header actions placed before the eye, plus and trash buttons.	–
`open`	`boolean` Whether the body is open (controlled).	–
`defaultOpen`	`boolean` Whether the body starts open (uncontrolled). default true	`true`
`onOpenChange`	`(open: boolean) => void`	–
`children`	`ReactNode`	–
Other props pass through: extends `ComponentProps<'div'>`.

Inspector Row

InspectorRow props
Prop	Type	Default
`label`Required	`ReactNode` The row's name, on the left.	–
`children`Required	`ReactNode` One or two fields: two share the width.	–
Other props pass through: extends `ComponentProps<'div'>`.

Data attributes

The panel carries data-slot="inspector-panel", data-yj-enabled and data-yj-visible (true or false, when their props are given) and Base UI's data-open while the body is open. The header is inspector-panel-header, the type menu's trigger inspector-panel-type, and the body inspector-panel-body.

MotionFold · reduced motion

Motion

Motion tokens
Moment	Tokens	Value	Curve
Fold and unfoldthe body eases between zero and its height while its content fades	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Switched offthe body dims	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

The body opens and closes at once, and dims without a fade.

Reduced motion

Folding and dimming happen at once; the chevron turns over without a spring.

AccessibilitySection, header controls, disabled body