Color Swatch Picker

A Color Swatch Picker keeps color values in sync across React Aria color components. It makes building color pickers with custom layouts a breeze through composition.

Basic

A color swatch picker allows users to choose a color from a predefined set.

Installation

In the terminal, run the following command to begin:
npx hq-kit add color-swatch-picker

Controlled

The color swatch can be managed in a controlled manner.

rgba(13, 110, 253, 1)

Disabled

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

rgba(13, 110, 253, 1)