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.
The import and the props worth knowing about, in one place.
import { InspectorColor } from "@/components/beste/component/inspector-color";
// The value is a readout, and the whole row opens the picker
<InspectorColor label="Color" defaultValue="#171717" />
// Controlled, with a separate commit for expensive work
<InspectorColor
label="Dot color"
value={dotColor}
onValueChange={setDotColor} // every adjustment
onValueCommit={(value) => console.log("persist", value)} // once per gesture
swatches={["#171717", "#6366f1", "#0ea5e9", "#10b981"]}
/>
<InspectorColor
label="Overlay"
icon={Layers} // optional leading icon
value={overlay}
onValueChange={setOverlay}
alpha // 8-digit hex, checkerboard behind the swatch
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// Theme tokens: write oklch() back out
<InspectorColor
label="Primary"
format="oklch"
value={theme.primary}
onValueChange={(value) => console.log(value)}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorColor } from "@/components/beste/component/inspector-color";
<InspectorColor
label="Color"
className="w-72"
defaultValue="#171717"
/>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 colour. Pair it with `onValueChange`. |
defaultValue | string | — | Initial colour in uncontrolled mode. |
onValueChange | (value: string) => void | — | Fires on every adjustment, including each frame of a drag in the picker. |
onValueCommit | (value: string) => void | — | Fires once an adjustment is finished — a drag release, a committed edit, a swatch click. Use it for work too expensive to run per frame. |
onOpenChange | (open: boolean) => void | — | Fires when the picker opens or closes. |
format | "hex" | "oklch" | "rgb" | "hex" | Notation written back through the callbacks. |
alpha | boolean | — | Carry an alpha channel, and show its rail 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. Falls back to `label`. |
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.
Settings row that pairs a label with its current choice inside one pill, opening a width-matched dropdown below: option icons, colour swatches, descriptions and grouped sections, on top of the accessible shadcn select.
Settings row with a label on the left and a plain text field on the right, sharing the family's pill: the whole row is the label, so pressing anywhere puts the caret in the field.
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.