ColorPicker

Pick solid colors with an HSV canvas and hex input, or build CSS linear gradients with draggable stops and an angle control. Supports presets, three sizes, and controlled / uncontrolled usage.

Playground

mode

size

showInput

showPresets

showArrow

showColorCode

disabled

<ColorPicker onChange={(value) => console.log(value)} />

Solid mode

Set mode="solid" to only expose the flat-color picker, no gradient tab.

#0285F7

Gradient mode

Set mode="gradient" to show only the gradient editor. Click the bar to add stops, drag to reposition, select a stop to edit its color.

linear-gradient(90deg, #0285F7 0%, #8B5CF6 100%)

Both modes (tabs)

Default mode shows Solid and Gradient tabs. Switching tabs converts the current value automatically.

#22C55E

Sizes

Three sizes to fit different layout densities.

Custom presets

Pass your own brand palette via the presets prop.

Without input / without presets

Control which picker UI elements are visible with showInput and showPresets.

Trigger: hide arrow / color code

showArrow and showColorCode let you strip down the trigger to just the swatch.

Trigger: custom radius

Pass triggerRadius to override the border-radius of the trigger button.

Custom trigger

Pass trigger as a ReactNode or render-prop receiving { open, value } to replace the default button entirely.

Disabled

The picker is non-interactive and visually muted when disabled.

API

Property	Type	Default	Description
`value`	`string`		Controlled value: hex string (#RRGGBB) for solid or CSS linear-gradient() for gradient
`defaultValue`	`string`		Initial value for uncontrolled usage
`onChange`	`(value: string) => void`		Called whenever the color changes
`mode`	`"solid" \| "gradient" \| "both"`	"both"	Which modes to allow. "both" renders Solid/Gradient tabs
`size`	`"sm" \| "md" \| "lg"`	"md"	Size of the trigger button
`disabled`	`boolean`	false	Disable the picker
`presets`	`string[]`	12 defaults	Quick-access color preset swatches
`showInput`	`boolean`	true	Show the hex input field inside the popover
`showPresets`	`boolean`	true	Show the preset color swatches inside the popover
`showArrow`	`boolean`	true	Show the chevron arrow on the trigger button
`showColorCode`	`boolean`	true	Show the hex color code text on the trigger button
`triggerRadius`	`string \| number`		Custom border-radius for the trigger button (number → px, string → as-is)
`trigger`	`ReactNode \| ((state: { open: boolean; value: string }) => ReactNode)`		Replace the default trigger button with a custom element or render prop
`placeholder`	`string`	"Pick a color"	Trigger placeholder text when no value
`className`	`string`		Extra className on the root element