A colour setting in one row
The name sits on the left, and the hex reading and a round swatch sit at the bar’s end. It is the library ColorPicker with its trigger dressed as an inspector bar, so the panel, with its saturation area, hue slider and hex field, is ColorPicker’s own. A click anywhere on the bar, the name included, opens the panel.
Sizes
The size prop matches Button’s: default is 40px tall and compact is 32px. The swatch is one line of text tall, so it sits concentric with the bar’s rounded end.
Alpha
Set showAlpha to add an opacity slider to the panel. Below full opacity the reading and the emitted value become 8-digit hex, and the swatch shows the colour over a checkerboard.
Disabled
When to use it
Use the inspector colour picker for a colour setting in a dense panel, usually inside an inspector section, whose open body lets the panel open past its edge. For a fixed set of colours, a row of swatches is quicker to pick from. For a form field with a label above and helper text below, use ColorPicker itself.
// From the npm package
import { InspectorColorPicker } from 'rift-ds/components/InspectorColorPicker/InspectorColorPicker';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/inspector-color-picker.json