dotUI

Color Swatch Picker

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

Overview

Examples

<ColorSwatchPicker defaultValue="#fff">
  <ColorSwatchPickerItem color="#fff" />
  <ColorSwatchPickerItem color="#A00" />
  <ColorSwatchPickerItem color="#f80" />
  <ColorSwatchPickerItem color="#080" />
  <ColorSwatchPickerItem color="#08f" />
  <ColorSwatchPickerItem color="#088" />
  <ColorSwatchPickerItem color="#008" />
</ColorSwatchPicker>

Installation

npm

pnpm

yarn

bun

pnpm dlx 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>

Playground

Use the controls below to experiment with different color swatch picker props and see the live preview and code update.

<Dynamic(ColorSwatchPicker)>
  <Dynamic(ColorSwatchPickerItem) color="#ff0000" />
  <Dynamic(ColorSwatchPickerItem) color="#00ff00" />
  <Dynamic(ColorSwatchPickerItem) color="#0000ff" />
  <Dynamic(ColorSwatchPickerItem) color="#ffff00" />
  <Dynamic(ColorSwatchPickerItem) color="#ff00ff" />
  <Dynamic(ColorSwatchPickerItem) color="#00ffff" />
</Dynamic(ColorSwatchPicker)>

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'`

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

ColorSwatchPickerItem

Missing description.

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

dotUI

Color Swatch Picker

Installation

Usage

Playground

API Reference

ColorSwatchPicker

ColorSwatchPickerItem

On this page

On this page

dotUI

Product

Community

Support