Color Swatch Picker

A color swatch picker allows users to select a color from a list of swatches.

<ColorSwatchPicker aria-label="Color swatches" defaultValue="#ff0000">
  <ColorSwatchPickerItem color="#ff0000" />
  <ColorSwatchPickerItem color="#00ff00" />
  <ColorSwatchPickerItem color="#0000ff" />
  <ColorSwatchPickerItem color="#ffff00" />
  <ColorSwatchPickerItem color="#ff00ff" />
  <ColorSwatchPickerItem color="#00ffff" />
</ColorSwatchPicker>

Installation

npm

pnpm

yarn

bun

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

Usage

Use color swatch pickers to allow users to select a color from a list of swatches.

import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from '@/components/ui/color-swatch-picker'

<ColorSwatchPicker>
  <ColorSwatchPickerItem color="#ff0000" />
  <ColorSwatchPickerItem color="#00ff00" />
  <ColorSwatchPickerItem color="#0000ff" />
</ColorSwatchPicker>

Anatomy

import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from '@/components/ui/color-swatch-picker'
;<ColorSwatchPicker>
  <ColorSwatchPickerItem color="#ff0000" />
</ColorSwatchPicker>

ColorSwatchPicker is the selectable list; each ColorSwatchPickerItem declares one swatch via its color prop and renders the color internally.

Value

The value is the selected color. Use defaultValue for uncontrolled state, or value with onChange to control it. Values are Color objects (via parseColor) or color strings, and onChange receives a Color.

import { parseColor } from 'react-aria-components'

const [color, setColor] = React.useState(parseColor('#f80'))

<ColorSwatchPicker value={color} onChange={setColor}>
  <ColorSwatchPickerItem color="#f80" />
  <ColorSwatchPickerItem color="#08f" />
</ColorSwatchPicker>

Examples

Basic

Brand Color Picker

Brand colorUsed for buttons, links, and accents.

Theme Color Selection

AccentPick a preset color scheme.

API Reference

ColorSwatchPicker

A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.

Prop	Type	Default
	`ReactNode`	`—`
	`"grid" \| "stack"`	`'grid'`

	`Color \| string`	`—`
	`Color \| string`	`—`
	`function`	`—`

ColorSwatchPickerItem

A ColorSwatchPickerItem represents an individual color swatch within a ColorSwatchPicker.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`Color \| string`	`—`
	`boolean`	`—`

Last updated on 7/7/2026