Color Swatch Picker

Installation

Install the component via the CLI in one command.

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

Composed components

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 {
  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

The color swatch can be managed in a controlled manner.

Disabled

While you can disable individual picker items, disabling the entire picker is possible but generally not recommended.

Component API

ColorSwatchPicker

ColorSwatchPickerItem