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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-variantsNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorVariants } from "@/components/beste/component/inspector-variants";
// The ordinary case: a picture of each variant, by URL
<InspectorVariants
label="Template"
defaultValue="gallery"
options={[
{ value: "editorial", label: "Editorial", image: "/thumbs/editorial.png" },
{ value: "gallery", label: "Gallery", image: "/thumbs/gallery.png" },
{ value: "portfolio", label: "Portfolio", image: "/thumbs/portfolio.png", description: "Grid of work" },
]}
/>
<InspectorVariants
label="Chart"
options={charts}
value={chart}
onValueChange={setChart}
onOpenChange={(open) => console.log("grid open:", open)}
columns={2} // choices per row, three by default
ratio="16 / 9" // shape of each picture, "4 / 3" by default
fit="contain" // "cover" (default) crops to the shape; "contain" fits the whole picture in
captioned={false} // pictures alone; each cell keeps the name as its label and tooltip
placeholder="Choose one" // shown while nothing is selected
clearable // adds a "Remove Chart" button at the foot
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// No screenshot to point at: an abstraction, or a miniature of the real thing.
// `image` wins when both are given.
<InspectorVariants
label="Density"
options={[
{
value: "comfortable",
label: "Comfortable",
preview: (
<span className="flex size-full flex-col justify-center gap-1.5 p-2">
<span className="h-1 rounded-full bg-foreground/25" />
<span className="h-1 w-2/3 rounded-full bg-foreground/25" />
</span>
),
},
{ value: "compact", label: "Compact", preview: <MyMiniature dense /> },
]}
/>
// A picture that fails to load is marked rather than left blank: an empty box is a
// variant with nothing in it, which is a different thing.Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorVariants } from "@/components/beste/component/inspector-variants";
<InspectorVariants
label="Template"
className="w-72"
defaultValue="gallery"
options={[{"value":"editorial","label":"Editorial","image":"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=320&q=60&auto=format&fit=crop"},{"value":"gallery","label":"Gallery","image":"https://images.unsplash.com/photo-1519681393784-d120267933ba?w=320&q=60&auto=format&fit=crop"},{"value":"portfolio","label":"Portfolio","image":"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=320&q=60&auto=format&fit=crop"}]}
/>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 pictures in the order they read |
| Escape | Close the grid, 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. |
options | InspectorVariant[] | — | The choices on offer. |
value | string | — | Controlled selection, by `value`. Pair it with `onValueChange`. |
defaultValue | string | — | Initial selection in uncontrolled mode. |
onValueChange | (value: string) => void | — | |
onOpenChange | (open: boolean) => void | — | Fires when the grid opens or closes. |
columns | number | 3 | Choices per row in the grid. |
ratio | string | "4 / 3" | Shape of each picture, as an aspect ratio. |
fit | "cover" | "contain" | "cover" | How an `image` fills its box. `cover` crops it to the shape, which is right for a screenshot; `contain` fits the whole thing in, which is right for a diagram or an icon on transparency that would lose its edges to a crop. |
captioned | boolean | true | Print the name (and any description) under each picture. Turn it off for a set whose pictures say everything — thumbnails of the real thing, where the names are filenames or numbers nobody reads — and the grid becomes pictures alone. The names do not go anywhere: each cell keeps them as its accessible name and its tooltip, and the row still says which one is chosen. |
clearable | boolean | — | Offer a clear button at the foot of the grid once something is selected. |
placeholder | string | — | Shown in the row while nothing is selected. |
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 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 that pairs a label with its current choice inside one pill, opening a width-matched dropdown below: option icons, colour swatches, descriptions and grouped sections, on top of the accessible shadcn select.
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.
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.