Color Area

A color area allows users to select a color from a two-dimensional gradient.

<ColorArea />

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/color-area

Use color areas to allow users to select a color from a two-dimensional gradient.

import { ColorArea } from "@/components/ui/color-area";
import { ColorThumb } from "@/components/ui/color-thumb";

<ColorArea>
	<ColorThumb />
</ColorArea>

Use the controls below to experiment with different color area props and see the live preview and code update.

isDisabled

<ColorArea defaultValue="#ff0000" />

Selected color : hsla(0, 100%, 50%, 1)

A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`ColorSpace`	`—`
	`boolean`	`—`
	`DOMRenderFunction<"div", ColorAreaRenderProps>`	`—`
	`ColorChannel`	`—`
	`string`	`—`
	`ColorChannel`	`—`
	`string`	`—`

	`Color \| string`	`—`
	`Color \| string`	`—`
	`function`	`—`
	`function`	`—`

Last updated on 5/22/2026