A color picker allows users to select a color from a palette or input a custom color value.
<ColorPicker>
<ColorPickerTrigger />
<ColorPickerContent>
<ColorEditor />
</ColorPickerContent>
</ColorPicker>pnpm dlx shadcn@latest add @dotui/color-pickerUse 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>Use the controls below to experiment with different color picker props and see the live preview and code update.
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 | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| | ||
| | ||
| | ||
| — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(ColorPicker) defaultValue="#ff0000">
<Dynamic(ColorPickerTrigger) />
<Dynamic(ColorPickerContent)>
<Dynamic(ColorEditor) />
</Dynamic(ColorPickerContent)>
</Dynamic(ColorPicker)>