ColorAreaNew
A 2D color picker that allows users to select colors from a gradient area
Import
import { ColorArea } from '@heroui/react';Usage
import {ColorArea} from "@heroui/react";
export function ColorAreaBasic() {
return (
<ColorArea defaultValue="rgb(116, 52, 255)">
<ColorArea.Thumb />
</ColorArea>
);
}Anatomy
import { ColorArea } from '@heroui/react';
export default () => (
<ColorArea>
<ColorArea.Thumb />
</ColorArea>
);With Dots
import {ColorArea} from "@heroui/react";
export function ColorAreaWithDots() {
return (
<ColorArea showDots defaultValue="hsl(200, 100%, 50%)">
<ColorArea.Thumb />
</ColorArea>
);
}Controlled
Current color: #9B80FF
"use client";
import type {Color} from "@heroui/react";
import {ColorArea, ColorSwatch, parseColor} from "@heroui/react";Color Space & Channels
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%)"use client";
import type {ColorSpace, Key} from "@heroui/react";
import {ColorArea, Label, ListBox, Select, parseColor} from "@heroui/react";Disabled
import {ColorArea} from "@heroui/react";
export function ColorAreaDisabled() {
return (
<ColorArea isDisabled defaultValue="hsl(200, 100%, 50%)">
<ColorArea.Thumb />
</ColorArea>
);
}Styling
Passing Tailwind CSS classes
import { ColorArea } from '@heroui/react';
function CustomColorArea() {
return (
<ColorArea className="max-w-72 rounded-3xl">
<ColorArea.Thumb />
</ColorArea>
);
}Customizing the component classes
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.
CSS Classes
The ColorArea component uses these CSS classes (View source styles):
Base Classes
.color-area- Base styles with gradient background and inner shadow.color-area--show-dots- Adds dot grid overlay for precision picking
Element Classes
.color-area__thumb- Draggable thumb indicator
Interactive States
The component supports both CSS pseudo-classes and data attributes for flexibility:
- Disabled:
[data-disabled="true"] - Focus:
[data-focus-visible="true"] - Dragging:
[data-dragging="true"](thumb only)
API Reference
ColorArea Props
Inherits from React Aria ColorArea.
| 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 |
ColorArea.Thumb Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
style | CSSProperties | ((renderProps) => CSSProperties) | - | Inline styles or render props function |
