Inspector Corners

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.

Installation

Adds the component and everything it depends on to your project.

npx shadcn add https://ui.beste.co/component/r-base/inspector-corners

New here? Read the installation guide.

Usage

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

import { InspectorCorners } from "@/components/beste/component/inspector-corners";

// Uncontrolled. The row reads "12 12 4 4 px"; the link toggle in the middle of the
// square starts on when all four corners already match.
<InspectorCorners label="Radius" defaultValue={{ topLeft: 12, topRight: 12, bottomRight: 4, bottomLeft: 4 }} suffix="px" />

// Controlled, with a separate commit for expensive work
<InspectorCorners
  label="Radius"
  value={radius}
  onValueChange={setRadius}                             // every accepted keystroke
  onValueCommit={(value) => console.log("persist", value)} // Enter or blur
  max={48}
  step={2}
  suffix="px"
/>

<InspectorCorners
  label="Corners"
  icon={Squircle}        // optional leading icon
  linked={linked}        // take the link state over, if it belongs to your state
  onLinkedChange={setLinked}
  onOpenChange={(open) => console.log("editor open:", open)}
  tone="outline"         // "muted" (default) | "outline" | "ghost"
  size="sm"              // "sm" | "default" | "lg"
  value={radius}
  onValueChange={setRadius}
/>

// Always four corners, no tie-together toggle
<InspectorCorners label="Radius" hideLink value={radius} onValueChange={setRadius} />

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Usage
import { InspectorCorners } from "@/components/beste/component/inspector-corners";

<InspectorCorners
  label="Radius"
  className="w-72"
  defaultValue={{"topLeft":12,"topRight":12,"bottomRight":4,"bottomLeft":4}}
  suffix="px"
/>

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.

Arrow Up / DownOne step on the focused corner.
Shift + ArrowTen steps.
EnterAccept what was typed into the field.
EscapeThrow the draft away and put the committed value back.
The link toggleTies the four corners together; typing into one then writes all four.

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
label*string—Label rendered on the left, inside the row.
iconLucideIcon—Optional leading icon shown before the label.
valuePartial<Record<CornerKey, number>>—Controlled value. Pair it with `onValueChange`.
defaultValuePartial<Record<CornerKey, number>>—Initial value in uncontrolled mode.
onValueChange(value: CornersValue) => void—Fires on every accepted keystroke and every step.
onValueCommit(value: CornersValue) => void—Fires once an edit is finished — Enter, or leaving a field.
onOpenChange(open: boolean) => void—Fires when the editor opens or closes.
minnumber0Smallest radius a corner may hold.
maxnumber999Largest radius a corner may hold.
stepnumber1Amount one arrow key press moves a corner.
suffixstring—Muted unit after the summary, e.g. "px", "rem".
defaultLinkedboolean—Start with the corners tied together. Defaults to on when the incoming value already has four equal corners, which is the usual starting point.
linkedboolean—Controlled link state, if the toggle belongs to your own state.
onLinkedChange(linked: boolean) => void—
hideLinkboolean—Drop the link toggle and always edit the four corners separately.
disabledboolean—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.
classNamestring—
aria-labelstring—Accessible name for the group. Falls back to `label`.

More Inspector components

View all Inspector

Inspector Spacing

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.

Inspector Border

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.

Dark Mode

Inspector Segmented

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.

Inspector Position

Settings row for a point on a surface: the row names the nine spots CSS names and shows the rest as two percentages, and opens a square pad the point is dragged around, with the thirds drawn on it and a pull towards them.

Inspector Combobox

Settings row for a list too long to read: pressing it opens a width-matched list with a search field, the keyboard walking the results while focus stays in the field. Options carry groups, descriptions, swatches and search keywords, and `multiple` turns the row into a counted multi-select.

Inspector Shadow

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.