Where the contents of a box sit in it: nine cells drawn in visual terms, mapped onto justify and align afterwards so the pair swapping places under a column direction is the component's problem and not the reader's. Direction, distribution and stretch sit under the pad as rows of the family, since each is a setting like any other.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-alignNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorAlign, alignToCss } from "@/components/beste/component/inspector-align";
<InspectorAlign label="Align" defaultValue={{ justify: "center", align: "center" }} />
<InspectorAlign
label="Content"
value={align} // { justify, align, direction, distribute }
onValueChange={setAlign}
onOpenChange={(open) => console.log("editor open:", open)}
directional={false} // drop the row/column choice for a box that is always one
distributable // space-between and its neighbours, on by default
stretchable // stretch across the cross axis, on by default
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// The CSS the value stands for, so a panel does not rebuild the mapping
<div style={alignToCss(align)}>{children}</div>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorAlign } from "@/components/beste/component/inspector-align";
<InspectorAlign
label="Align"
className="w-72"
defaultValue={{"justify":"center","align":"center","direction":"row","distribute":"packed"}}
/>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.
| Enter / Space | Open the editor from the row |
|---|---|
| Tab | Walks the nine cells in the order they read |
| Escape | Close the editor, leaving the value alone |
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 | AlignValue | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | AlignValue | — | Initial value in uncontrolled mode. |
onValueChange | (value: AlignValue) => void | — | |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
directional | boolean | true | Offer the direction, which decides which axis `justify` is on. |
distributable | boolean | true | Offer space-between and its neighbours. |
stretchable | boolean | true | Offer `stretch` across the cross axis. |
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 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 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.
The family's block row: the same surface and tones, but the label sits above a multi-line field whose height comes from the text, with a character count whenever there is a limit to see. Collapsible, so a paragraph written once can be folded down to the height of a row without leaving the form.
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.