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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-borderNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorBorder } from "@/components/beste/component/inspector-border";
// Uncontrolled. Opens on all four sides, 1px, dashed.
<InspectorBorder label="Border" />
// An empty `sides` list is no border, so the width never has to carry a zero to
// mean the same thing.
<InspectorBorder label="Border" defaultValue={{ sides: ["bottom"], width: 2, style: "solid" }} />
// Controlled, with a separate commit for expensive work
<InspectorBorder
label="Card border"
value={border}
onValueChange={setBorder}
onValueCommit={(value) => save(value)}
/>
<InspectorBorder
label="Divider"
icon={SquareIcon} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
maxWidth={8} // widest the border may be, in px
styles={["solid"]} // one entry fixes the style and drops the choice
alpha // carry an alpha channel through the colour
format="oklch" // notation the colour is written back in
value={border}
onValueChange={setBorder}
/>
// What the value turns into. Per side rather than one `border`, since the whole
// point of the row is that the four sides differ.
const side = (name) =>
border.sides?.includes(name) ? `${border.width}px ${border.style} ${border.color}` : undefined;
<div
style={{
borderTop: side("top"),
borderRight: side("right"),
borderBottom: side("bottom"),
borderLeft: side("left"),
}}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorBorder } from "@/components/beste/component/inspector-border";
<InspectorBorder
label="Border"
className="w-72"
/>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 | BorderValue | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | BorderValue | — | Initial value in uncontrolled mode. |
onValueChange | (value: BorderValue) => void | — | Fires on every adjustment, including each keystroke in the width field. |
onValueCommit | (value: BorderValue) => void | — | Fires once an adjustment is finished — a side toggled, a width committed, a colour released. Use it for work too expensive to run per keystroke. |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
maxWidth | number | 12 | Widest the border may be, in px. |
styles | BorderStyle[] | ["solid", "dashed", "dotted"] | Which line styles to offer. Pass one to fix the style and drop the choice from the editor. |
format | "hex" | "oklch" | "rgb" | — | Notation the colour is written back in. |
alpha | boolean | — | Carry an alpha channel through the colour. |
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 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 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 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.
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.