On this page
Props
<ColorArea defaultValue="#ff0000">
<ColorThumb />
</ColorArea>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/color-areaUsage
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>Examples
Default
Channels
Disabled
Uncontrolled
Controlled
Selected color : hsla(0, 100%, 50%, 1)
API Reference
ColorArea
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 | — | ||
ColorChannel | — | ||
string | — | ||
ColorChannel | — | ||
string | — | ||
Color | string | — | ||
Color | string | — | ||
function | — | ||
function | — | ||
ColorThumb
A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
| Prop | Type | Default | |
|---|---|---|---|
ReactNode | function | — | ||
Last updated on 6/16/2026