Color Picker

A color picker allows users to select a color from a palette or input a custom color value.

<ColorPicker defaultValue="#5100FF">
  <Button>
    <ColorSwatch />
    Accent
  </Button>
  <Popover className="p-2.5">
    <ColorEditor />
  </Popover>
</ColorPicker>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/color-picker

Usage

Use color pickers to allow users to select a color from a palette or input a custom color value. The editing surface inside the popover is a Color Editor.

import { Button } from '@/components/ui/button'
import { ColorEditor } from '@/components/ui/color-editor'
import { ColorPicker } from '@/components/ui/color-picker'
import { DialogContent } from '@/components/ui/dialog'
import { Popover } from '@/components/ui/popover'

<ColorPicker defaultValue="#ff0000">
  <Button aria-label="Pick a color" isIconOnly />
  <Popover>
    <DialogContent>
      <ColorEditor />
    </DialogContent>
  </Popover>
</ColorPicker>

Anatomy

ColorPicker wraps a Button trigger and a Popover holding the editing surface. A Button with no children auto-fills with a ColorSwatch reflecting the current value.

<ColorPicker>
  <Button isIconOnly />
  <Popover>
    <DialogContent>
      <ColorArea />
      <ColorSlider />
    </DialogContent>
  </Popover>
</ColorPicker>

Value

ColorPicker syncs a Color value across its children. Use defaultValue for uncontrolled state, or value with onChange to control it. Both accept a hex string or a Color from parseColor.

import { parseColor } from 'react-aria-components'

const [value, setValue] = React.useState(parseColor('hsl(26, 33%, 78%)'))

<ColorPicker value={value} onChange={setValue}>
  {/* ... */}
</ColorPicker>

Open state

The popover is uncontrolled by default. Use defaultOpen, or isOpen with onOpenChange to control it; ColorPicker forwards these to its internal dialog.

<ColorPicker isOpen={isOpen} onOpenChange={setIsOpen}>
  {/* ... */}
</ColorPicker>

Examples

Basic Color Picker

With Preset Swatches

Channel Sliders with Color Space Selector

API Reference

ColorPicker

A ColorPicker synchronizes a color value between multiple React Aria color components. It simplifies building color pickers with customizable layouts via composition.

Prop	Type	Default
	`ReactNode \| function`	`—`

	`Color \| string`	`—`
	`Color \| string`	`—`
	`function`	`—`

See Color Editor for the editing surface API.

Last updated on 7/7/2026