A ColorPicker allow users to select and edit a color in an overlay.
<ColorPicker defaultValue="#5100FF" />
Installation
npx dotui-cli@latest add color-picker
Anatomy
import { ColorPicker } from "@/components/core/color-picker";
<ColorPicker defaultValue="#5100FF" />;
import {
ColorPickerRoot,
ColorPickerButton,
ColorPickerEditor,
} from "@/components/core/color-picker";
import { DialogRoot, Dialog } from "@/components/core/dialog";
<ColorPickerRoot defaultValue="#5100FF">
<DialogRoot>
<ColorPickerButton />
<Dialog>
<ColorPickerEditor />
</Dialog>
</DialogRoot>
</ColorPickerRoot>;
Unontrolled
An initial, uncontrolled value can be provided to the ColorPicker using the defaultValue prop.
<ColorPicker defaultValue="#5100FF" />
Controlled
Use the value and onChange props to control the color picker value.
const [value, setValue] = React.useState(parseColor("hsl(25, 100%, 50%)"));
<ColorPicker value={value} onChange={setValue} />;
ColorPicker accepts all button options.
<ColorPicker size="sm" shape="rectangle">
Fill color
</ColorPicker>
Composition
If you need to customize things further, you can drop down to the composition level.
<ColorPickerRoot defaultValue="#5100FF">
<DialogRoot>
<ColorPickerButton />
<Dialog type="popover" mobileType="drawer">
<ColorPickerEditor />
</Dialog>
</DialogRoot>
</ColorPickerRoot>
Examples
Channel sliders
This example uses ColorSlider to allow a user to adjust each channel of a color value, with a Select to switch between color spaces.
"use client";
import React from "react";
import { getColorChannels, type ColorSpace } from "react-aria-components";
import {
ColorPickerRoot,
ColorPickerButton,
} from "@/components/dynamic-core/color-picker";
import { Dialog, DialogRoot } from "@/components/dynamic-core/dialog";
import { ColorSlider } from "@/registry/core/color-slider_basic";
import { Select, SelectItem } from "@/registry/core/select_basic";
export default function Demo() {
const [space, setSpace] = React.useState<ColorSpace>("rgb");
return (
<ColorPickerRoot defaultValue="#5100FF">
<DialogRoot>
<ColorPickerButton />
<Dialog type="popover" mobileType="drawer" className="space-y-2">
<Select
aria-label="Color format"
selectedKey={space}
onSelectionChange={(key) => setSpace(key as ColorSpace)}
size="sm"
>
<SelectItem id="rgb">RGB</SelectItem>
<SelectItem id="hsl">HSL</SelectItem>
<SelectItem id="hsb">HSB</SelectItem>
</Select>
{getColorChannels(space).map((channel) => (
<ColorSlider
key={channel}
colorSpace={space}
channel={channel}
label={channel}
/>
))}
<ColorSlider channel="alpha" label="alpha" />
</Dialog>
</DialogRoot>
</ColorPickerRoot>
);
}
Swatches
This example uses a ColorSwatchPicker to provide color presets for a color picker.
import { Button } from "@/components/dynamic-core/button";
import {
ColorPickerEditor,
ColorPickerRoot,
} from "@/components/dynamic-core/color-picker";
import { ColorSwatch } from "@/components/dynamic-core/color-swatch";
import { Dialog, DialogRoot } from "@/components/dynamic-core/dialog";
import {
ColorSwatchPicker,
ColorSwatchPickerItem,
} from "@/registry/core/color-swatch-picker_basic";
export default function Demo() {
return (
<ColorPickerRoot defaultValue="#5100FF">
<DialogRoot>
<Button shape="square">
<ColorSwatch />
</Button>
<Dialog type="popover" mobileType="drawer">
<ColorPickerEditor />
<ColorSwatchPicker className="mt-2 justify-between">
<ColorSwatchPickerItem color="#A00" />
<ColorSwatchPickerItem color="#f80" />
<ColorSwatchPickerItem color="#080" />
<ColorSwatchPickerItem color="#08f" />
<ColorSwatchPickerItem color="#008" />
<ColorSwatchPickerItem color="#fff" />
</ColorSwatchPicker>
</Dialog>
</DialogRoot>
</ColorPickerRoot>
);
}
API Reference
ColorPicker
ColorPicker props extends and Button's props and the following
| Prop | Type | Default | Description |
|---|
value | string | Color | - | The current value (controlled). |
defaultValue | string | Color | - | The default value (uncontrolled). |
showAlphaChannel | boolean | false | Whether to show the alpha channel slider. |
colorFormat | 'hex' | 'rgb' | 'hsl' | 'hsb' | 'hex' | The color format to display. |
showFormatSelector | boolean | false | Whether to show the format selector. |
children | ReactNode | (values: T & {defaultChildren: ReactNode | undefined}) => ReactNode | - | The children of the component. A function may be provided to alter the children based on component state. |
| Event | Type | Description |
|---|
onChange | (value: Color) => void | Handler that is called when the value changes. |