Usage

import { ColorArea } from '@heroui/react';

Anatomy

import { ColorArea } from '@heroui/react';

export default () => (
  <ColorArea>
    <ColorArea.Thumb />
  </ColorArea>
);

Use colorSpace to set the color space (RGB, HSL, HSB) and xChannel/yChannel props to customize which color channels are displayed on each axis.

Color Space

X Axis

Y Axis

hsb(219, 58%, 93%)

Current color: #9B80FF

To customize the ColorArea component classes, you can use the @layer components directive. Learn more.

@layer components {
  .color-area {
    @apply rounded-3xl;
  }

  .color-area__thumb {
    @apply size-5 border-4;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

The ColorArea component uses these CSS classes (View source styles):

The component supports both CSS pseudo-classes and data attributes for flexibility:

Prop	Type	Default	Description
`value`	`string \| Color`	-	The current color value (controlled)
`defaultValue`	`string \| Color`	-	The default color value (uncontrolled)
`onChange`	`(color: Color) => void`	-	Handler called when the color changes while dragging
`onChangeEnd`	`(color: Color) => void`	-	Handler called when the user stops dragging
`xChannel`	`ColorChannel`	`"saturation"`	Color channel for the horizontal axis
`yChannel`	`ColorChannel`	`"brightness"`	Color channel for the vertical axis
`colorSpace`	`ColorSpace`	-	The color space for the channels
`isDisabled`	`boolean`	`false`	Whether the color area is disabled
`showDots`	`boolean`	`false`	Whether to show the dot grid overlay
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorAreaRenderProps>`	-	Overrides the default DOM element with a custom render function.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`style`	`CSSProperties \| ((renderProps) => CSSProperties)`	-	Inline styles or render props function
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorThumbRenderProps>`	-	Overrides the default DOM element with a custom render function.