SwatchPicker

SwatchPicker presents a fixed palette of swatches and lets the user pick one; it is controlled via value/onChange. It is domain-neutral — wire it to whatever the swatch values represent in your app, such as a brand accent color. Each swatch is a string or a { value, label } object; set allowCustom to add a free-form entry and size ('sm' | 'md') to scale the chips.

Example

import { SwatchPicker } from '@officina/ui';
import { useState } from 'react';

function AccentSwatches() {
  const [accent, setAccent] = useState('#3858e9');
  return (
    <SwatchPicker
      value={accent}
      onChange={setAccent}
      allowCustom
      swatches={['#3858e9', '#7c3aed', '#0ea5e9', '#16a34a', '#e11d48']}
    />
  );
}

API