Color Picker

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

<ColorPicker>
  <Button isIconOnly>
    <ColorSwatch />
  </Button>
  <Popover>
    <DialogContent>
      <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" className="w-full" />
      <ColorSlider colorSpace="hsb" channel="hue" />
    </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>

Playground

Use the controls below to experiment with different color picker props and see the live preview and code update.

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

ColorPickerTrigger

Missing description.

Prop	Type	Default
	`boolean`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"button", ButtonRenderProps>`	`—`

ColorPickerContent

Missing description.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`DOMRenderFunction<"section", undefined>`	`—`

Last updated on 5/22/2026