Color Picker - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/color-picker

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { ColorPicker } from "@/components/ui/color-picker"

<ColorPicker value={color} onChange={setColor} />

getColorClass / getColorTextClass map the palette keys to literal Tailwind classes; the soft pill tint for the same keys is getColorPillTint from the color lib helpers.

API Reference

Prop	Type	Default	Description
`value`*	`string \| null`	—	Currently selected color key (null = no color).
`onChange`*	`(color: string \| null) => void`	—	Called with the selected color key, or null for the no-color option.
`colors`	`readonly string[]`	`DEFAULT_COLORS`	Palette keys to show. Defaults to the 16-color Tailwind palette.
`showNone`	`boolean`	`true`	Whether to render the "no color" swatch.
`noneLabel`	`string`	`"None"`	Accessible label for the no-color swatch.
`columns`	`number`	`8`	Number of swatches per row.
`swatchSize`	`"sm" \| "md" \| "lg"`	`"md"`	Swatch dimensions.