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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-mediaNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorMedia } from "@/components/beste/component/inspector-media";
// The built-in editor: URL field, preview, and a "Remove Background" at its foot
<InspectorMedia label="Background" value={src} onValueChange={setSrc} clearable />
// Hand the choosing to an asset manager: the row calls this instead of opening
// the built-in editor, and removal belongs to that library too.
<InspectorMedia
label="Poster"
value={poster}
onValueChange={setPoster}
onPick={() => openMediaLibrary({ onSelect: setPoster })}
/>
<InspectorMedia
label="Clip"
kind="video" // the thumbnail falls back to a film icon
value={clip}
onValueChange={setClip}
placeholder="https://cdn.example.com/loop.mp4"
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorMedia } from "@/components/beste/component/inspector-media";
<InspectorMedia
label="Background"
className="w-72"
defaultValue="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=160&q=60&auto=format&fit=crop"
clearable
/>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 | string | — | Controlled source. Pair it with `onValueChange`. |
defaultValue | string | — | Initial source in uncontrolled mode. |
onValueChange | (value: string) => void | — | |
onPick | () => void | — | Hand the choosing over to your own media library: when this is set the row calls it instead of opening the built-in editor, which is what an app with an asset manager wants. |
kind | "image" | "video" | "image" | What the thumbnail falls back to when there is nothing to show, and which placeholder the URL field suggests. |
clearable | boolean | — | Offer a "Remove {label}" button at the foot of the built-in editor once something is set. It has no effect alongside `onPick`, where there is no editor to host it and the asset library owns removal. |
placeholder | string | — | Placeholder for the built-in URL field. |
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.
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 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.
Settings row for a CSS filter stack, all ten functions of it: the row shows the whole stack applied to something, and opens an editor holding the nine numeric filters as rows of the family plus a drop shadow section, over a preview large enough to judge.