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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-gradientNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorGradient } from "@/components/beste/component/inspector-gradient";
// Bare colours are spaced evenly, which keeps the simple case simple
<InspectorGradient label="Gradient" defaultValue={{ kind: "linear", angle: 135, stops: ["#fb7185", "#8b5cf6"] }} />
// Give a stop a position and it holds that share: here the first colour keeps the
// opening third to itself, and the last two split what is left. Drag the handles
// over the ramp in the editor to do the same by hand.
<InspectorGradient
label="Background"
defaultValue={{
stops: [
{ color: "#fdba74", position: 0 },
{ color: "#fb7185", position: 40 },
{ color: "#8b5cf6", position: 100 },
],
}}
/>
// Stops are written in the order given and never sorted, so a stop placed before
// the one ahead of it stays a hard edge, which is how a stripe is made.
<InspectorGradient
label="Stripe"
kinds={["linear"]}
defaultValue={{ angle: 90, stops: [{ color: "#171717", position: 50 }, { color: "#e5e5e5", position: 50 }] }}
/>
// Controlled, with a separate commit for expensive work
<InspectorGradient
label="Background"
value={gradient}
onValueChange={setGradient} // every frame of a drag
onValueCommit={(value) => console.log("persist", value)} // on release, add, remove
/>
// One kind is a setting rather than a choice, so the segmented row drops away.
// A radial gradient has no direction either, so the dial goes with it.
<InspectorGradient label="Overlay" kinds={["linear"]} value={overlay} onValueChange={setOverlay} />
<InspectorGradient
label="Palette"
icon={Blend} // optional leading icon
minStops={2}
maxStops={7} // 7 by default, as the full gradient picker allowed
format="oklch" // notation the stops are written back in
alpha // stops carry an alpha channel
swatches={["#171717", "#fb7185", "#8b5cf6"]} // presets inside each stop's picker
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
value={gradient}
onValueChange={setGradient}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorGradient } from "@/components/beste/component/inspector-gradient";
<InspectorGradient
label="Gradient"
className="w-72"
defaultValue={{"kind":"linear","angle":135,"stops":[{"color":"#fdba74","position":0},{"color":"#fb7185","position":40},{"color":"#8b5cf6","position":100}]}}
/>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 stops on the bar. |
|---|---|
| Arrow keys | Move the focused stop one percent along the gradient. |
| Shift + Arrow | Ten percent. |
| Double-click the bar | Add a stop where you clicked. |
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 | GradientValue | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | GradientValue | — | Initial value in uncontrolled mode. |
onValueChange | (value: GradientValue) => void | — | Fires on every adjustment, including each frame of a drag. Stops are always written back with explicit positions, whatever shape they arrived in. |
onValueCommit | (value: GradientValue) => void | — | Fires once an adjustment is finished — a handle, angle or colour released, a stop added or removed. Use it for work too expensive to run per frame. |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
kinds | GradientKind[] | ["linear", "radial", "conic"] | Which kinds to offer. Pass one to fix the gradient to it and drop the choice from the editor. |
minStops | number | 2 | Fewest stops the gradient may hold. |
maxStops | number | 7 | Most stops the gradient may hold. |
format | "hex" | "oklch" | "rgb" | — | Notation the stops are written back in. |
alpha | boolean | — | Carry an alpha channel through the stops. |
swatches | string[] | — | Preset colours offered inside a stop's picker. |
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 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.
Settings row whose choices sit side by side on the right, with a marker that slides between them: the readable alternative to a switch when the two states deserve names, and the compact one to a select at three or four options.
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.