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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-colorNew here? Read the installation guide.
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 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. Falls back to `label`. |
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.
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.