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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-iconNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorIcon } from "@/components/beste/component/inspector-icon";
import { HeartIcon, SparklesIcon, StarIcon } from "lucide-react";
const icons = [
{ name: "sparkles", icon: SparklesIcon },
{ name: "star", icon: StarIcon },
{ name: "heart", icon: HeartIcon, label: "Favourite" }, // label is what search and the tooltip use
];
<InspectorIcon label="Icon" icons={icons} defaultValue="star" />
<InspectorIcon
label="Badge icon"
icons={icons}
value={iconName}
onValueChange={setIconName}
onOpenChange={(open) => console.log("palette open:", open)}
clearable // adds a "Remove Icon" button at the foot of the palette
columns={6} // icons per row in the palette, 8 by default
searchable // on by default past sixteen icons
emptyMessage="Nothing matches"
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 { InspectorIcon } from "@/components/beste/component/inspector-icon";
<InspectorIcon
label="Icon"
className="w-72"
defaultValue="zap"
clearable
icons={[{"name":"sparkles","icon":{"displayName":"Sparkles"}},{"name":"star","icon":{"displayName":"Star"}},{"name":"heart","icon":{"displayName":"Heart"}},{"name":"flame","icon":{"displayName":"Flame"}},{"name":"zap","icon":{"displayName":"Zap"}},{"name":"sun","icon":{"displayName":"Sun"}},{"name":"moon","icon":{"displayName":"Moon"}},{"name":"cloud","icon":{"displayName":"Cloud"}},{"name":"leaf","icon":{"displayName":"Leaf"}},{"name":"globe","icon":{"displayName":"Globe"}},{"name":"compass","icon":{"displayName":"Compass"}},{"name":"map-pin","icon":{"displayName":"MapPin"}},{"name":"rocket","icon":{"displayName":"Rocket"}},{"name":"shield","icon":{"displayName":"Shield"}},{"name":"gift","icon":{"displayName":"Gift"}},{"name":"tag","icon":{"displayName":"Tag"}},{"name":"bookmark","icon":{"displayName":"Bookmark"}},{"name":"bell","icon":{"displayName":"Bell"}},{"name":"calendar","icon":{"displayName":"Calendar"}},{"name":"camera","icon":{"displayName":"Camera"}},{"name":"image","icon":{"displayName":"Image"}},{"name":"layers","icon":{"displayName":"Layers"}},{"name":"music","icon":{"displayName":"Music"}},{"name":"activity","icon":{"displayName":"Activity"}}]}
/>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. |
icons | InspectorIconChoice[] | — | The icons on offer. Passing the set rather than importing one keeps this component out of the business of bundling an icon library — hand it the subset that belongs to whatever is being edited. |
value | string | — | Controlled selection, by `name`. Pair it with `onValueChange`. |
defaultValue | string | — | Initial selection in uncontrolled mode. |
onValueChange | (name: string) => void | — | |
onOpenChange | (open: boolean) => void | — | Fires when the palette opens or closes. |
clearable | boolean | — | Offer a clear button once something is selected. |
searchable | boolean | — | Show the search field. Defaults to on once there are more than sixteen icons. |
columns | number | 8 | Icons per row in the palette. |
emptyMessage | string | — | Message shown when nothing matches the search. |
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 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.
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 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.