FormsFree

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

Color picker

Saved colours

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  ColorPicker,
  ColorPickerProps,
  ColorPickerTrigger,
} from "@wunderui/react"

The panel with the value in HEX. Drag in the area or on the sliders, or use the arrow keys (Shift for big steps).

Color picker

Saved colours

variant="grid" swaps the area for a grid of greys and nine shades of twelve hues. Arrow keys move through the grid.

Color picker

Saved colours

The select switches the value fields; set the starting format with defaultFormat.

Color picker

Saved colours

Color picker

Saved colours

ColorPickerTrigger is the field that opens the picker in a popover — swatch, hex value, chevron.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

A settings card with a labelled trigger; the preview follows the colour as you pick.

Brand colour

Buttons, links, focus rings and the first chart series use it.

Primary

Preview: View report

Prop	Type	Default
variant	"spectrum" \| "grid"	"spectrum"
value / defaultValue / onValueChange	string (#RRGGBB)	"#555CF3"
alpha / defaultAlpha / onAlphaChange	number (0–1)	1
showAlpha	boolean	true
format / defaultFormat / onFormatChange	"hex" \| "rgb" \| "hsl"	"hex"
swatches / defaultSwatches / onSwatchesChange	string[]	nine WunderUI hues
title	ReactNode \| null	"Color picker"
onClose	() => void	— (shows the close button)
ColorPickerTrigger	value, defaultValue, onValueChange, label, pickerProps, side, align	—