The shape a box is cut to. Every thumbnail is drawn with the property it sets, so the grid is not a picture of the shapes but the shapes themselves, and a shape with a number in it brings its own slider out. Percentages throughout, so a shape survives a box that changes size.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-clipNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorClip, clipToCss } from "@/components/beste/component/inspector-clip";
<InspectorClip label="Shape" defaultValue={{ shape: "hexagon" }} />
<InspectorClip
label="Mask"
value={clip} // { shape, amount }
onValueChange={setClip}
onOpenChange={(open) => console.log("editor open:", open)}
columns={4} // shapes per row, five by default
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// Your own shapes. A function makes the shape parametric, which is what brings
// the amount slider out.
<InspectorClip
label="Shape"
shapes={[
{ value: "none", label: "None", css: "none" },
{ value: "arch", label: "Arch", css: "ellipse(50% 100% at 50% 100%)" },
{
value: "notch",
label: "Notch",
css: (amount) => `inset(0 0 ${amount}% 0)`,
defaultAmount: 20,
amountLabel: "Depth",
},
]}
/>
<div style={{ clipPath: clipToCss(clip) }} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorClip } from "@/components/beste/component/inspector-clip";
<InspectorClip
label="Shape"
className="w-72"
defaultValue={{"shape":"hexagon"}}
/>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 grid from the row |
|---|---|
| Tab | Walks the shapes in the order they read |
| Left / Right | Step the amount, for a shape that has one |
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 | ClipValue | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | ClipValue | — | Initial value in uncontrolled mode. |
onValueChange | (value: ClipValue) => void | — | |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
shapes | ClipShape[] | — | The shapes on offer. Each carries the CSS it comes to, as a string or as a function of one number — and a function is what brings out the amount slider. |
columns | number | 5 | Shapes per row in the grid. |
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.
The choice that has to be seen to be made: a template, a layout, a chart type. Each option is a picture, normally a rendered screenshot passed as a URL, or markup for the choices no photograph would show. The row is the trigger, the grid is width-matched to it, and the captions under the pictures can be dropped for a set whose pictures say everything.
Settings row for an image or a video: the asset itself as a thumbnail on the right, and pressing the row opens a width-matched editor with the URL, a preview and a remove. Given a picker of your own, it hands the choosing to your media library instead.
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 ratio: the row prints it and draws it, and opens an editor with the ratios worth a name plus both sides always editable. It is kept as two numbers rather than as their quotient, since 16:9 is what a reader recognises.
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.