Inspector Gradient

About this component

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.

Usage

The import and the props worth knowing about, in one place.

import { InspectorGradient } from "@/components/beste/component/inspector-gradient";

// Bare colors 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}
/>

Keyboard and gestures

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.

Props

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 colors 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`.

More Inspector components

View all Inspector

Dark Mode

OffOn