Color picker

When to use #

Use it for

Accent and label colours in settings.
You want to warn when a colour has low contrast.

Skip it when

Only a fixed palette is allowed; use chips or radio cards.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/color-picker.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

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

export function AccentColour() {
  const [colour, setColour] = useState("#4f46e5");
  return (
    <div className="w-full max-w-xs">
      <ColorPicker
        label="Accent"
        swatches={[
          { value: "#4f46e5", label: "Indigo" },
          { value: "#0f766e", label: "Teal" },
          { value: "#b45309", label: "Amber" },
          { value: "#be123c", label: "Rose" },
        ]}
        value={colour}
        onValueChange={setColour}
      />
    </div>
  );
}

API reference #

ColorPicker

component

PropTypeDefault

label *string—

swatchesreadonly ColorSwatch[][]

valuestring—

defaultValuestring—

onValueChange((value: string) => void)—

backgroundstring"#ffffff"

namestring—

classNamestring—

It exposes dialog and slider semantics, with aria-haspopup, aria-expanded, aria-hidden, aria-label, aria-roledescription and aria-valuemin kept in step with state.

KeyBehaviour

EscapeCloses or cancels, then returns focus to where it came from.

→Moves to the next item or value.

←Moves to the previous item or value.

↑Moves to the previous item or value.

↓Moves to the next item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.