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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-easingNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorEasing } from "@/components/beste/component/inspector-easing";
// Uncontrolled. The value is the four numbers cubic-bezier() takes, in its order.
<InspectorEasing label="Easing" defaultValue={[0.34, 1.56, 0.64, 1]} />
// Controlled. The value is a four-tuple, so say so on the state: a plain
// `useState([0.25, 0.1, 0.25, 1])` widens to number[] and will not fit.
const [easing, setEasing] = React.useState<[number, number, number, number]>([0.25, 0.1, 0.25, 1]);
<InspectorEasing
label="Easing"
value={easing}
onValueChange={setEasing}
onValueCommit={(value) => save(value)}
/>
<InspectorEasing
label="Curve"
icon={ActivityIcon} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
hidePreview // drop the strip that runs the motion
presets={[ // pass an empty list to leave only the curve
{ label: "Snap", value: [0.2, 0, 0, 1] },
{ label: "Glide", value: [0.16, 1, 0.3, 1] },
]}
value={easing}
onValueChange={setEasing}
/>
// What the value turns into
<div style={{ transitionTimingFunction: `cubic-bezier(${easing.join(", ")})` }} />
// The same four numbers reach a Web Animations call
element.animate(frames, { duration: 400, easing: `cubic-bezier(${easing.join(", ")})` });Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorEasing } from "@/components/beste/component/inspector-easing";
<InspectorEasing
label="Easing"
className="w-72"
defaultValue={[0.34,1.56,0.64,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.
| Tab | Move between the two control points; each is its own button. |
|---|---|
| Arrow keys | Nudge the focused point. Left and Right move it in time, Up and Down in value. |
| Shift + Arrow | Ten times the step, for crossing the curve quickly. |
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 | [number, number, number, number] | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | [number, number, number, number] | — | Initial value in uncontrolled mode. |
onValueChange | (value: EasingValue) => void | — | Fires on every frame of a drag, and on every key press. |
onValueCommit | (value: EasingValue) => void | — | Fires once a change is finished — a handle released, a preset chosen. Use it for work too expensive to run per frame. |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
presets | EasingPreset[] | the five CSS keywords plus two overshooting shapes | Which presets to offer. Pass an empty list to drop the menu and leave only the curve. |
hidePreview | boolean | — | Drop the strip that runs the motion under the curve. |
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 gradient: the row shows a strip of it, and opens an editor with draggable stops over the ramp, so one colour can hold a wider share than the next. The kind, the direction and the selected stop's colour and offset sit under it as rows of the family.
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 point on a surface: the row names the nine spots CSS names and shows the rest as two percentages, and opens a square pad the point is dragged around, with the thirds drawn on it and a pull towards them.
Settings row for the four edges of a box: the row carries a CSS-shorthand summary, and opens a cross where each field sits on the edge it sets, tied together or not.