Color Area

<ColorArea aria-label="Color" defaultValue="#ff0000">
  <ColorThumb />
</ColorArea>

Installation

npx shadcn@latest add @dotui/color-area

Usage

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>

Anatomy

A ColorArea renders the gradient and positions a ColorThumb. If you omit children, a default ColorThumb is rendered for you.

import { ColorArea } from '@/components/ui/color-area'
import { ColorThumb } from '@/components/ui/color-thumb'
;<ColorArea>
  <ColorThumb />
</ColorArea>

Value

Use defaultValue for uncontrolled state, or value with onChange to control it. Uncontrolled values accept a color string; controlled values are Color objects created with parseColor.

import { parseColor } from 'react-aria-components'

const [value, setValue] = React.useState(parseColor('hsl(0, 100%, 50%)'))

<ColorArea value={value} onChange={setValue} />

Channels

xChannel and yChannel map two channels of the color to the horizontal and vertical axes of the gradient.

<ColorArea xChannel="saturation" yChannel="lightness" />

Examples

API Reference

ColorArea

ColorThumb