Color Picker

Swatch trigger that opens area + hue slider + hex field (+ presets) in a popover. All parts share one value.

Import

import { ColorPicker } from '@marbleui/ui'

Props

<ColorPicker>

Prop	Type	Default	Description
children	`ReactNode`	`—`
label	`string`	`—`
presets	`string[]`	`—`	Preset swatches shown under the editor.
showAlpha	`boolean`	`—`
trigger	`'button' \| 'field'`	`'button'`	"button": swatch + label trigger. "field": input-like trigger showing the hex value.

Also accepts React Aria props (4).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria ColorPicker · React Aria Dialog · React Aria DialogTrigger. Follow the primitive's docs for the full keyboard map.

Usage notes

Swatch trigger that opens a popover with a saturation/brightness area, hue slider, hex field and optional presets. For an always-visible editor, compose ColorArea, ColorSlider and ColorField yourself; for presets only, use ColorSwatchPicker.

<ColorPicker label="Accent color" defaultValue="#6366f1" presets={['#ef4444', '#22c55e', '#3b82f6']} />

Uncontrolled: defaultValue. Controlled: value + onChange (a React Aria Color; call color.toString('hex')). Colors can be passed as strings.
trigger is button (swatch + label, default) or field (swatch + hex text). showAlpha adds an opacity slider.
label is also the popover dialog’s aria-label (default “Color”), so set it even in field mode.
Pass custom children to replace the built-in editor; they share the picker’s value.

Example source · show

import { ColorPicker } from './color-picker'

const presets = ['#0f172a', '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#3b82f6', '#8b5cf6', '#ec4899']

export const styles = {
  Button: () => <ColorPicker label="Accent color" defaultValue="#6366f1" />,
  Field: () => <ColorPicker label="Brand" trigger="field" defaultValue="#0ea5e9" presets={presets} />,
  Alpha: () => <ColorPicker label="Overlay" defaultValue="rgba(15, 23, 42, 0.5)" showAlpha />,
}

Source: packages/ui/src/color-picker/color-picker.tsx

Catalog

Category: color
Priority: Core
Primitive: react-aria
React Aria: ColorPicker