Color Picker

HSV picker with sliders, format readouts, hex input, presets, popover mode, and eyedropper.

Installation

npx shadcn@latest add @iconiq/color-picker

File Structure

Usage

"use client";

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

export function BrandColorPicker() {
  const [color, setColor] = useState("#3B82F6");

  return (
    <div className="flex w-full items-center justify-center px-4 py-6">
      <div className="flex w-full flex-col items-center gap-4 text-center">
        <ColorPicker
          aria-label="Brand color"
          name="brand-color"
          onChange={setColor}
          showCopy
          value={color}
        />
        <p className="flex flex-wrap items-center justify-center gap-x-1 gap-y-1 text-balance text-center text-[15px] text-muted-foreground leading-relaxed sm:text-base">
          <span>Your</span>
          <span className="font-medium" style={{ color }}>
            brand color
          </span>
          <span>—tuned from one compact panel.</span>
        </p>
      </div>
    </div>
  );
}

Props

Description

ColorPicker

value

Controlled hex color such as #3B82F6 or #3B82F680. When provided, the picker syncs its internal state to this value.

Type string

defaultValue

Starting color for uncontrolled usage (3-, 6-, or 8-digit hex). Ignored when value is supplied.

Type string·Default #3B82F6

onChange

Called when the color settles (pointer up on sliders, blur/Enter on inputs). Emits #RRGGBB, or #RRGGBBAA when alpha is below 100%, plus CSS strings in detail.

Type (color: string, detail: ColorPickerChangeDetail) => void

onValueCommit

Fires alongside onChange when the color settles. Useful for form commit handlers.

Type (color: string, detail: ColorPickerChangeDetail) => void

defaultAlpha

Starting alpha percentage (0–100) for uncontrolled usage when defaultValue has no alpha channel.

Type number·Default 100

defaultFormat

Initial readout format for the footer row.

Type "HEX" | "RGB" | "HSL" | "OKLCH"·Default HEX

variant

Inline panel (default), field popover trigger, or compact swatch trigger that opens the picker on click.

Type "inline" | "popover" | "swatch"·Default inline

open

Controlled open state when variant is popover.

Type boolean

defaultOpen

Initial open state for uncontrolled popover usage.

Type boolean·Default false

onOpenChange

Called when the popover panel opens or closes.

Type (open: boolean) => void

placeholder

Placeholder text for the popover trigger label.

Type string·Default Pick a color

presets

Quick-select swatch colors shown above the saturation field.

Type string[]

swatchShape

Corner style for swatch triggers and preset chips. Use circle for a fully round swatch.

Type "default" | "circle"·Default default

showAlpha

Shows or hides alpha controls and keeps output opaque when false.

Type boolean·Default true

showCopy

Shows a copy-to-clipboard control for the active format string.

Type boolean·Default false

disabled

Disables picker interaction and lowers shell opacity.

Type boolean·Default false

showEyedropper

Shows or hides the pipette control in the footer row.

Type boolean·Default true

onEyedropperUnsupported

Called when EyeDropper is unavailable. No alert dialog is shown by default.

Type () => void

id

Root element id used for internal aria wiring.

Type string

name

Hidden input name for native form submission.

Type string

aria-label

Accessible label when not using aria-labelledby.

Type string·Default Color picker

aria-labelledby

ID of an external label element.

Type string

className

Merged onto the outer shell for width, shadow, or layout overrides.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react, lucide-react, motion.

This page documents the Base UI install only. Text inputs use the Base UI Input primitive; Radix UI does not ship a dedicated color picker primitive.

The generated registry file is /r/color-picker.json.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Selected color: #3B82F6