Color Editor

<ColorEditor defaultValue="#5100FF" />

Installation

npx shadcn@latest add @dotui/color-editor

Usage

Use a color editor to let users adjust a color with a saturation/brightness area, channel sliders, and format-aware fields. Standalone, it manages its own color value; inside a Color Picker, it edits the picker's color instead.

import { ColorEditor } from '@/ui/color-editor'

<ColorEditor defaultValue="#5100FF" />

Anatomy

ColorEditor renders a saturation/brightness area with channel sliders, then a row of format-aware fields. Omit children for the default layout, or compose the parts yourself.

import {
  ColorEditor,
  ColorEditorArea,
  ColorEditorFields,
} from '@/ui/color-editor'

<ColorEditor>
  <ColorEditorArea showAlphaChannel />
  <ColorEditorFields defaultFormat="rgb" />
</ColorEditor>

• ColorEditorArea — the color area, hue slider, and optional alpha slider.
• ColorEditorFields — channel inputs for the current format, with an optional format selector.

Composition

The default children render an area row and a fields row. Pass your own children to reorder, drop, or extend them — for example, dropping a swatch picker between the two parts.

<ColorEditor defaultValue="#f80">
  <ColorEditorArea showAlphaChannel />
  <ColorSwatchPicker>{/* ... */}</ColorSwatchPicker>
  <ColorEditorFields defaultFormat="rgb" showFormatSelector={false} />
</ColorEditor>

Value

The value is a React Aria Color. Use defaultValue for uncontrolled state, or value with onChange to control it. Pass a hex string (including alpha, e.g. #5100FF80) or a Color from parseColor.

<ColorEditor defaultValue="#5100FF" onChange={setColor} />

Color format

ColorEditorFields picks its channel inputs from the current format. Set the initial format with defaultFormat (hex, rgb, hsl, or hsb), or control it with format and onFormatChange.

<ColorEditorFields format={format} onFormatChange={setFormat} />

Examples

API Reference

ColorEditor

ColorEditorArea

ColorEditorFields