Settings row for a list of colours: a swatch per stop, each opening the OKLCH picker, and a remove and add pair at the far right bounded by min and max.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-multicolorNew here? Read the installation guide.
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 colours. 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 colours the list may hold; the remove button stops there. |
max | number | 5 | Most colours the list may hold; the add button stops there. |
newColor | string | "#ffffff" | Colour 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 colours 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 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.
Settings row for a gradient: the row shows a strip of it, and opens an editor with draggable stops over the ramp, so one colour can hold a wider share than the next. The kind, the direction and the selected stop's colour and offset sit under it as rows of the family.