Color Wheel
A circular color selection tool that visualizes the full color spectrum for intuitive and precise color picking, supporting controlled values and disabled states.
Installation
Install the component via the CLI in one command.
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.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components
Anatomy
import { ColorWheel } from "@/components/ui/color-wheel"
<ColorWheel aria-label="Background color" />Examples
Controlled
Manage the color wheel in a controlled manner, adjusting the color value as needed.
Disabled
Disable the color wheel to prevent interaction.
Component API
ColorWheel
The ColorWheel component renders a circular hue selector.
| Prop | Type | Default |
|---|---|---|
className | string | - |
See the React Aria for the full API reference.
Unlock the full power ofIntent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.