How long a change takes, when it starts, and the shape of it, in one row instead of three that drift apart. The editor runs the real transition on a loop rather than drawing its curve, since what a reader needs to know is whether 300ms feels slow.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-transitionNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import {
InspectorTransition,
transitionToCss,
} from "@/components/beste/component/inspector-transition";
<InspectorTransition
label="Transition"
defaultValue={{ duration: 300, delay: 0, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }}
/>
<InspectorTransition
label="Hover"
value={motion} // { duration, delay, easing }
onValueChange={setMotion}
onOpenChange={(open) => console.log("editor open:", open)}
easings={["linear", { value: "ease-out", label: "Ease out" }]}
maxDuration={1000} // ceiling for both times, 2000 by default
step={50} // step for both times, 10 by default
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// The shorthand, in the order that gets written backwards by hand
<div style={{ transition: transitionToCss(motion, "opacity") }} />
// For drawing a curve rather than picking one, reach for inspector-easing.Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorTransition } from "@/components/beste/component/inspector-transition";
<InspectorTransition
label="Transition"
className="w-72"
defaultValue={{"duration":300,"delay":0,"easing":"cubic-bezier(0.4, 0, 0.2, 1)"}}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Enter / Space | Open the editor from the row |
|---|---|
| Left / Right | Step a focused time slider |
| Escape | Close the editor, leaving the value alone |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | TransitionValue | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | TransitionValue | — | Initial value in uncontrolled mode. |
onValueChange | (value: TransitionValue) => void | — | |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
easings | (string | EasingOption)[] | — | The timing functions on offer. For drawing a curve by hand, reach for inspector-easing — this row is for picking one and timing it. |
maxDuration | number | 2000 | Ceiling for both times, in milliseconds. |
step | number | 10 | Step for both times, in milliseconds. |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |
Settings row for a date, a time, or both: the row reads the value the way anyone would write it down and opens a real month calendar, while a time on its own keeps the platform's own field inline, since a time has no month to show.
Settings row for a border: the row draws one exactly as described beside a summary of it, and opens an editor with the sides as icon toggles and the width, style and colour under them, each one a row of the family.
Settings row for a cubic-bezier: the row names the preset and draws the curve small, and opens an editor with the two control points draggable, room above and below the run for an overshoot, and a strip that runs the motion so the choice can be watched rather than read.
Width and height on one row, with the lock between them: while it is closed, editing one scales the other by the ratio the pair had when the lock closed. Both fields are as wide as the largest number they can hold, so typing never shifts the row.
The columns of a grid as a list of lengths: the row shows the CSS it comes to, the editor holds one length per line with a picture of the shares above them. There is no reordering on purpose, because a track's place in the list is its place in the grid.
The strip that splits a settings panel into two or three questions instead of one long scroll. It is the strip and nothing else: what the tabs switch between stays in the panel's own markup, beside the state that decides it. The pill slides between equal columns, arrow keys both move and select, and a tab can carry a count of what has changed under it.