Settings row for a list of colors: a swatch per stop, each opening the OKLCH picker, and a remove and add pair at the far right bounded by min and max.
The import and the props worth knowing about, in one place.
import { InspectorMulticolor } from "@/components/beste/component/inspector-multicolor";
// Uncontrolled
<InspectorMulticolor label="Color stops" defaultValue={["#3a29ff", "#ff94b4", "#ff3232"]} />
// Controlled, with a separate commit for expensive work. Gradients and shader
// backgrounds are the usual reason to want one.
<InspectorMulticolor
label="Color stops"
value={colorStops}
onValueChange={setColorStops} // every adjustment
onValueCommit={(value) => console.log("persist", value)} // release, add, remove
min={1}
max={3}
/>
<InspectorMulticolor
label="Palette"
icon={Palette} // optional leading icon
min={2}
max={6}
newColor="#171717" // what the add button appends
format="oklch" // "hex" (default) | "oklch" | "rgb"
alpha // 8-digit hex, checkerboard behind each swatch
swatches={["#171717", "#6366f1", "#0ea5e9"]} // presets inside the picker
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
value={palette}
onValueChange={setPalette}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorMulticolor } from "@/components/beste/component/inspector-multicolor";
<InspectorMulticolor
label="Color stops"
className="w-72"
defaultValue={["#3a29ff","#ff94b4","#ff3232"]}
max={5}
/>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 list of colors. Pair it with `onValueChange`. |
defaultValue | string[] | — | Initial list in uncontrolled mode. |
onValueChange | (value: string[]) => void | — | Fires on every edit: a colour adjustment, an added stop, a removed one. |
onValueCommit | (value: string[]) => void | — | Fires once an edit is finished — a drag released in the picker, a stop added or removed. Use it for work too expensive to run per frame. |
min | number | 1 | Fewest colors the list may hold; the remove button stops there. |
max | number | 5 | Most colors the list may hold; the add button stops there. |
newColor | string | "#ffffff" | Color appended by the add button. |
format | "hex" | "oklch" | "rgb" | "hex" | Notation written back through the callbacks. |
alpha | boolean | — | Carry an alpha channel, and show its row in the picker. |
swatches | string[] | — | Preset colors offered inside the picker. |
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 for the group. Falls back to `label`. |
Settings row that keeps the label, the colour value and a swatch on one pill; pressing the row opens the OKLCH colour picker below it, which is where the value is edited.
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.
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 holding a set of pills that are each on or off, so any number of them can be on at once: what inspector-segmented is for one choice out of several, this is for several choices at once, and what inspector-switch is for a single flag, this is for a handful that belong together.