A color swatch picker allows users to select a color from a list of swatches.
<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>npx shadcn@latest add @dotui/color-swatch-pickerUse 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>Use the controls below to experiment with different color swatch picker props and see the live preview and code update.
<ColorSwatchPicker>
<ColorSwatchPickerItem color="#ff0000" />
<ColorSwatchPickerItem color="#00ff00" />
<ColorSwatchPickerItem color="#0000ff" />
<ColorSwatchPickerItem color="#ffff00" />
<ColorSwatchPickerItem color="#ff00ff" />
<ColorSwatchPickerItem color="#00ffff" />
</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 | — | ||
Missing description.
| Prop | Type | Default | |
|---|---|---|---|
string | Color | — | ||
boolean | — | ||
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.