Color Swatch Picker

ColorSwatchPicker
Loading...

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/color-swatch-picker

Manual installation

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

npm install react-aria-components

Anatomy

import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from "@/components/ui/color-swatch-picker"
<ColorSwatchPicker aria-label="Pick color">
  <ColorSwatchPickerItem color="#f59e0b" />
  <ColorSwatchPickerItem color="#84cc16" />
  <ColorSwatchPickerItem color="#0d6efd" />
</ColorSwatchPicker>

Examples

Controlled

Manage the selected swatch from the parent component.

Loading...

Disabled

Set isDisabled on individual swatch picker items to prevent their selection.

Loading...

Component API

ColorSwatchPicker

ColorSwatchPicker extends the React Aria Components <ColorSwatchPicker> component.

classNamestring

ColorSwatchPickerItem

ColorSwatchPickerItem extends the React Aria Components <ColorSwatchPickerItem> component.

classNamestring

See the React Aria for the full API reference.

Design
Color Slider
Color Swatch