Search

Search components and blocks

Sign in

Color Picker

New

A swatch-and-hex row that unfolds into a picker: a draggable saturation and brightness field, a hue bar, a hex input and preset swatches. Thumbs spring up under your finger, the selected swatch ring slides between swatches, and everything works from the keyboard (arrow keys, Shift for bigger steps).

pnpm dlx shadcn@latest add @ditherui/color-picker

Install

$ pnpm dlx shadcn@latest add @ditherui/color-picker

Props

valuestring—
defaultValuestringfirst swatch
onValueChange(hex: string) => void—
labelstring—
swatchesreadonly string[]DefaultSwatches
align"start" | "center" | "end""end"
disabledbooleanfalse
classNamestring—

When to use the color picker

Use the color picker when people choose a color. A swatch-and-hex row unfolds into a saturation and brightness field, a hue bar, a hex input and preset swatches.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components