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}
/>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`. |