ColorPicker

Swatch-and-hex trigger opening an HSV field, hue rail, hex input, and swatches.

ColorPicker keeps the value visible at all times: the trigger is a swatch square beside the mono hex — the value is the label. The popup is an HSV plane lit by the current hue with a square thumb that tracks the pointer 1, a thin hue rail, a hex input that commits on Enter or blur (and quietly reverts invalid input), and optional preset swatches. Hue lives in state, so the rail never snaps to red when saturation or brightness hit an extreme.

"use client";

import { useState } from "react";

import { ColorPicker } from "./color-picker";
import { defaultColor, neonSwatches } from "./fixtures";

export const ColorPickerDemo = () => {
  const [color, setColor] = useState(defaultColor);

  return (
    <div className="flex flex-col items-center gap-4">
      <ColorPicker
        onValueChange={setColor}
        swatches={neonSwatches}
        value={color}
      />
      <div
        className="h-10 w-48 border border-border/60"
        style={{ backgroundColor: color }}
      />
    </div>
  );
};

export default ColorPickerDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/color-picker.json

Usage

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

<ColorPicker
  value={color}
  onValueChange={setColor}
  swatches={["#00e599", "#ff4c8b"]}
/>;

Props

PropType

value?string

Controlled hex value, e.g. "#00e599".

Typestring

defaultValue?string

Uncontrolled initial hex value.

Typestring

Default"#00e599"

onValueChange?(hex: string) => void

Called with the new hex on every change.

Type(hex: string) => void

swatches?string[]

Preset swatches rendered under the field.

Typestring[]

disabled?boolean

Typeboolean

Defaultfalse

label?string

Accessible label for the trigger.

Typestring

Default"Color"

Accessibility

The field and hue rail are real sliders: arrow keys nudge (2% / 4°), shift-arrows jump (10% / 30°), and the field announces its hex via aria-valuetext. The trigger’s accessible name includes the current value. Thumbs move transform-only — no layout shift anywhere.