Swatch Picker · paneui

Installation

pnpm dlx shadcn@latest add @paneui/swatch-picker

Usage

import { SwatchPicker } from "@/components/ui/swatch-picker"

<SwatchPicker
  label="Tag colour"
  swatches={[
    { value: "none", label: "None" },
    { value: "blue", label: "Blue", color: "var(--chart-1)" },
    { value: "pink", label: "Pink", color: "var(--chart-5)" },
  ]}
  value={color}
  onValueChange={setColor}
/>

Examples

Letter

Palette, not picker

For an arbitrary colour use ColorPicker; SwatchPicker is a fixed palette. It is a radio group with one tab stop, and arrow keys move between swatches. A swatch without color is the "none" choice.

Colours

Pass theme tokens (var(--chart-1)) for UI that follows light and dark, or hex when the value leaves the app (the email editor's palette).

API Reference

Built on the Radio Group primitive. Only the props this library adds or changes are listed; everything else passes through.

SwatchPicker

Also accepts every prop of RadioGroup.

swatches*: { value: string; label: string; color?: string }[]; The palette. label is the accessible name and tooltip.
variant= "dot": "dot" | "letter"; Colour dots or an "A" per colour.
label: React.ReactNode; Visible label above the swatches (also labels the group).

Prop	Type	Default	Description
swatches*	{ value: string; label: string; color?: string }[]	—	The palette. `label` is the accessible name and tooltip.
variant	"dot" \| "letter"	"dot"	Colour dots or an "A" per colour.
label	React.ReactNode	—	Visible label above the swatches (also labels the group).