Color Picker

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

On this page

Props

<ColorPicker defaultValue="#ff0000">
  <Button />
  <Popover>
    <DialogContent>
      <ColorEditor />
    </DialogContent>
  </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.

import { ColorEditor } from '@/components/ui/color-editor'
import {
  ColorPicker,
  ColorPickerContent,
  ColorPickerTrigger,
} from '@/components/ui/color-picker'

<ColorPicker defaultValue="#ff0000">
  <ColorPickerTrigger />
  <ColorPickerContent>
    <ColorEditor />
  </ColorPickerContent>
</ColorPicker>

Examples

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`	`—`

ColorEditor

A color editor allows users to adjust a color value using a color area, channel sliders, and field inputs in multiple color formats.

Supports all div attributes.

Prop	Type	Default
	`ColorFormat`	`'hex'`
	`boolean`	`false`
	`boolean`	`true`

Last updated on 6/16/2026