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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-shadowNew here? Read the installation guide.
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 a CSS filter stack, all ten functions of it: the row shows the whole stack applied to something, and opens an editor holding the nine numeric filters as rows of the family plus a drop shadow section, over a preview large enough to judge.
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.