Color Picker

A saturation and value field over a hue rail, with an eyedropper for sampling colours already on the page. Drag either surface to dial a colour in. Hex (with alpha as 8-digit) is always one glance away, and quick-pick presets are available via `showPresets`. Never clipped - the panel renders in a portal.

Installation

npx stepwise-ui add color-picker

Default

#3B82F6

import { ColorPicker } from '@/components/stepwise/color-picker'

const [color, setColor] = useState('#3b82f6')

<ColorPicker value={color} onChange={setColor} />

Sizes

`size` takes `"sm" | "md" | "lg"`. Default is "md".

<ColorPicker size="sm" value={color} onChange={setColor} />
<ColorPicker size="md" value={color} onChange={setColor} />
<ColorPicker size="lg" value={color} onChange={setColor} />

Presets

Off by default - pass `showPresets` to add a row of quick-pick swatches below the hex field.

<ColorPicker value={color} onChange={setColor} showPresets />

Props

PropTypeDescription

value

string

Hex color string. Default "#3b82f6".

onChange

(hex: string) => void

Fires with a valid 6-digit hex value on every change.

showPresets

boolean

Show a row of quick-pick preset swatches. Default false.

size

"sm" | "md" | "lg"

Trigger swatch size. Default "md".