Settings row for a box shadow: the row shows the shadow itself, and opens an editor holding a larger preview with offset, blur, spread and colour under it, each one a row of the family.
The import and the props worth knowing about, in one place.
import { InspectorShadow } from "@/components/beste/component/inspector-shadow";
// Uncontrolled. The value is the pieces CSS takes, so the shadow itself is
// `${x}px ${y}px ${blur}px ${spread}px ${color}`.
<InspectorShadow label="Shadow" defaultValue={{ x: 0, y: 3, blur: 12, spread: -2, color: "#0f172a33" }} />
// Controlled, with a separate commit for expensive work
<InspectorShadow
label="Card shadow"
value={shadow}
onValueChange={setShadow} // every frame of a drag
onValueCommit={(value) => console.log("persist", value)} // on release
/>
// There is no opacity control on purpose: the colour carries its own alpha, and
// two ways to set one number always drift apart.
<InspectorShadow
label="Glow"
icon={Sun} // optional leading icon
maxOffset={80} // how far the offsets reach, either way; 40 by default
maxBlur={120}
maxSpread={40}
allowInset // offers the inset/outset toggle
format="oklch" // notation the colour is written back in
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
value={shadow}
onValueChange={setShadow}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorShadow } from "@/components/beste/component/inspector-shadow";
<InspectorShadow
label="Shadow"
className="w-72"
defaultValue={{"x":0,"y":3,"blur":12,"spread":-2,"color":"#0f172a33"}}
/>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 | ShadowValue | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | ShadowValue | — | Initial value in uncontrolled mode. |
onValueChange | (value: ShadowValue) => void | — | Fires on every adjustment, including each frame of a drag. |
onValueCommit | (value: ShadowValue) => void | — | Fires once an adjustment is finished — a slider released, a colour committed. Use it for work too expensive to run per frame. |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
maxOffset | number | 40 | Largest offset either axis may take, in px. The range runs both ways. |
maxBlur | number | 80 | Largest blur, in px. |
maxSpread | number | 20 | Largest spread, in px. The range runs both ways. |
allowInset | boolean | — | Offer the inset toggle. |
format | "hex" | "oklch" | "rgb" | — | Notation the colour is written back in. |
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 that names the chosen icon and shows it on the right; pressing the row opens a searchable palette below it, width-matched to the row, with clearing offered at the foot of it. The icon set is passed in, so the row never bundles an icon library of its own.
Settings row for the four corners of a box: the row carries a border-radius shorthand summary and a glyph rounded to match, and opens a square where each field sits on the corner it rounds.
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.