Color Picker
Pick a colour: saturation and brightness, hue, opacity, eyedropper, HEX/RGB/HSL values and saved colours — inline or from a trigger field.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
ColorPicker,
ColorPickerProps,
ColorPickerTrigger,
} from "@wunderui/react"Examples
Default
The panel with the value in HEX. Drag in the area or on the sliders, or use the arrow keys (Shift for big steps).
Swatch grid
variant="grid" swaps the area for a grid of greys and nine shades of twelve hues. Arrow keys move through the grid.
RGB and HSL
The select switches the value fields; set the starting format with defaultFormat.
Trigger
ColorPickerTrigger is the field that opens the picker in a popover — swatch, hex value, chevron.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Brand colour setting
A settings card with a labelled trigger; the preview follows the colour as you pick.