Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Choicebox
Next: Combobox

Color Picker

Full-featured color picker with HSL canvas, eyedropper, and multiple formats for React

A 2D saturation/lightness canvas, hue slider, alpha control, and eyedropper that samples colors from your screen. Output in HEX, RGB, CSS rgba(), or HSL. Compound components let you build exactly the picker you need. Great for theme builders, design tools, or brand editors.

Color Picker preview

Scroll to load preview

Installation

Combobox

Searchable select

Choicebox

Card selection

Dropzone

File upload

Status

Color indicators

FAQ

Was this page helpful?

Sign in to leave feedback.

Choicebox

Card-style radio selection with rich content for React

Combobox

Searchable select dropdown with type-to-filter for React