Color Area
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/color-area
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components
Anatomy
import { ColorArea } from "@/components/ui/color-area"
<ColorArea />Examples
Channel
Specify the color channels for the horizontal and vertical axes using the xChannel and yChannel properties.
Space
Set colorSpace to rgb, hsl, or hsb. Choose xChannel and yChannel values that belong to that color space.
Controlled
Pass value and update it with onChange to control the selected color.
Disabled
Set isDisabled on the color area to disable interaction.
Color area with slider
Combine a color area with a slider to adjust different channels of the same color.
Component API
ColorArea
ColorArea extends the React Aria Components <ColorArea> component.
classNamestringSee the React Aria for the full API reference.
