Color Swatch Picker

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

On this page

Props

isDisabled

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

Examples

Basic

Disabled

Controlled

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 6/16/2026