Color Picker

A color selection component with spectrum picker, hue slider, HEX input, and preset swatches.

Overview

The ColorPicker component provides an interactive color selection experience with a trigger swatch, saturation/lightness spectrum, hue slider, HEX input field, and preset color swatches.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add color-picker

pnpm dlx @work-rjkashyap/unified-ui add color-picker

npx @work-rjkashyap/unified-ui add color-picker

bunx @work-rjkashyap/unified-ui add color-picker

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { ColorPicker } from "@work-rjkashyap/unified-ui";

Examples

Default

<ColorPicker defaultValue="#3b82f6" />
<ColorPicker defaultValue="#ef4444" />
<ColorPicker defaultValue="#22c55e" />

<ColorPicker defaultValue="#3b82f6" /><ColorPicker defaultValue="#ef4444" /><ColorPicker defaultValue="#22c55e" />

Sizes

<ColorPicker defaultValue="#8b5cf6" size="sm" />
<ColorPicker defaultValue="#8b5cf6" size="md" />
<ColorPicker defaultValue="#8b5cf6" size="lg" />

<ColorPicker defaultValue="#8b5cf6" size="sm" /><ColorPicker defaultValue="#8b5cf6" size="md" /><ColorPicker defaultValue="#8b5cf6" size="lg" />

Custom Presets

<ColorPicker
defaultValue="#f97316"
presets={["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6"]}
/>

<ColorPickerdefaultValue="#f97316"presets={["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6"]}/>

Disabled

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled HEX color value.
`defaultValue`	`string`	`"#000000"`	Default color for uncontrolled mode.
`onChange`	`(color: string) => void`	—	Callback when the color changes.
`presets`	`string[]`	18 defaults	Preset color swatches to display.
`showInput`	`boolean`	`true`	Whether to show the HEX input field.
`disabled`	`boolean`	`false`	Whether the picker is disabled.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the trigger swatch.
`label`	`string`	`"Choose color"`	Accessibility label for the trigger.
`className`	`string`	—	Additional CSS classes.

Accessibility

Trigger button has aria-label, aria-expanded, and aria-haspopup attributes.
Popover closes on Escape key and outside click.
Hue slider and spectrum area are keyboard navigable.
HEX input validates on blur.

On this page