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.
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"
/>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`. |