Color picker

A full colour picker: a saturation/value area, hue and alpha sliders, hex and RGB fields, presets and an eyedropper.

$bunx shadcn@latest add @nx-ui/color-picker
Registry item
Installs withbuttoncolor-swatchinputpopoverutils

Basic usage

Uncontrolled, seeded with defaultValue. Drag the saturation area, or the hue and alpha sliders below it.

Controlled, with presets

Pass value and onValueChange to drive the picker yourself; presets compose ColorSwatch and highlight the active match.

Presets
#F7EC33

In a popover

ColorPickerTrigger renders a swatch + hex chip button; wrap ColorPicker in a popover for a compact field control.

Composition: brand accent picker

Choosing the accent colour for a Nexus ReGen depot's public-facing collection calendar.

Used for the collection-day highlight on the Barrowfield depot's public calendar embed.

API reference

Exported parts and their props, extracted from the component source.