Color Editor

A color editor allows users to adjust a color value using a color area, channel sliders, and field inputs in multiple color formats.

On this page

<ColorEditor defaultValue="#5100FF" />

Installation

npm

pnpm

yarn

bun

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 '@/components/ui/color-editor'

<ColorEditor defaultValue="#5100FF" />

Composition

The default children render an area row and a fields row. Pass your own children to reorder, drop, or extend them.

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

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

Examples

Alpha channel

In a color picker

Custom composition

API Reference

ColorEditor

A color editor allows users to adjust a color value using a color area, channel sliders, and field inputs in multiple color formats. Inside a ColorPicker it edits the picker's color; standalone it manages its own.

Supports all div attributes.

Prop	Type	Default
	`ColorFormat`	`'hex'`
	`boolean`	`false`
	`boolean`	`true`

	`Color \| string`	`—`
	`Color \| string`	`'#6366F1'`
	`function`	`—`

ColorEditorArea

A color editor area displays a saturation/brightness area next to a hue slider and an optional alpha slider.

Supports all div attributes.

Prop	Type	Default
	`boolean`	`false`

ColorEditorFields

Color editor fields display channel inputs for the current color format, with an optional format selector.

Supports all div attributes.

Prop	Type	Default
	`ColorFormat`	`—`
	`ColorFormat`	`'hex'`
	`boolean`	`true`

Last updated on 7/3/2026