Color Wheel

ColorWheel
Loading...

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/color-wheel

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.

color thumb

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components

Anatomy

import { ColorWheel } from "@/components/ui/color-wheel"
<ColorWheel aria-label="Background color" />

Examples

Controlled

Pass value and update it with onChange to control the color wheel.

Loading...

Disabled

Disable the color wheel to prevent interaction.

Loading...

Component API

ColorWheel

ColorWheel extends the React Aria Components <ColorWheel> component.

classNamestring

See the React Aria for the full API reference.

Design
Color Thumb
Command Menu