Color Picker

Color picker control supporting preset swatches, native HTML5 eyedropper pipette, and direct hex or RGB string input.

// Plain markup
import { ColorPicker } from "@shavin/ui";

Default Grid Layout with Custom Hex Picker

Custom

Selected value:#46a758

const [color, setColor] = useState("#46a758");

<ColorPicker value={color} onChange={setColor} />

Custom Label & Label Styling (customLabel, customLabelClassName)

Select Hex

<ColorPicker
  value={color}
  onChange={setColor}
  customLabel="Select Hex"
  customLabelClassName="text-[10px] font-semibold text-accent uppercase tracking-wider"
/>

Compact Field Variant (variant='field')

Input field with leading color swatch and trailing pipette eyedropper:

const [color, setColor] = useState("#8B5CF6");

<ColorPicker variant="field" value={color} onChange={setColor} className="w-64" />

Horizontal Scroll Swatch Row (swatchLayout='scroll')

Custom

<ColorPicker value={color} onChange={setColor} swatchLayout="scroll" />

Custom Palette Swatches (presets prop)

Custom

// ds-lint-disable-next-line no-hex
const customSwatches = [
  // ds-lint-disable-next-line no-hex
  { name: "Brand Primary", hex: "#0066FF" },
  // ds-lint-disable-next-line no-hex
  { name: "Brand Accent", hex: "#FF5533" },
  // ds-lint-disable-next-line no-hex
  { name: "Success Mint", hex: "#10B981" },
];

<ColorPicker value={color} onChange={setColor} presets={customSwatches} />

Custom RGB Color Mode (colorMode='rgb', maxSwatches=12)

Custom

<ColorPicker value={color} onChange={setColor} colorMode="rgb" maxSwatches={12} />

Props Specification

Prop	Type	Default
value*	string	—
onChange*	(hex: string) => void	—
variant	"default" \| "field"	—
presets	ColorPickerSwatch[]	—
swatchLayout	"grid" \| "scroll"	—
maxSwatches	number	—
colorMode	"hex" \| "rgb"	—
customLabel	React.ReactNode	—
customLabelClassName	string	—
allowCustom	boolean	—
size	"sm" \| "md" \| "lg" \| "full"	"md"

* required