A color picker allows users to select a color from a palette or input a custom color value.
<ColorPicker>
<ColorPickerTrigger />
<ColorPickerContent>
<ColorEditor />
</ColorPickerContent>
</ColorPicker>npx 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.
<ColorPicker defaultValue="#ff0000">
<ColorPickerTrigger />
<ColorPickerContent>
<ColorEditor />
</ColorPickerContent>
</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 | — | ||
string | Color | — | ||
string | Color | — | ||
function | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
boolean | — | ||
union | 'default' | ||
"sm" | "md" | "lg" | "md" | ||
"default" | "square" | "auto" | "auto" | ||
boolean | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.