✨ Publier v1 is live — a polished docs platform built for the open web.
Skip to content

ColorSwatch

Grid of color swatches with click-to-copy CSS values — for theme and design-system pages.

The ColorSwatch component from @publier/primitives renders a clickable grid of colors with their labels. Clicking a swatch copies its CSS value to the clipboard — ideal for design-system pages or theme references where readers need to grab a color quickly.

Usage

import { ColorSwatch } from '@publier/primitives';


<ColorSwatch
  columns={4}
  size="md"
  colors={[
    { name: 'Primary 500', value: '#6366f1' },
    { name: 'Primary 600', value: '#4f46e5' },
    { name: 'Accent', value: 'hsl(210 80% 55%)' },
    { name: 'Surface', value: 'var(--color-base-200)' },
  ]}
/>

Props

ColorSwatch

PropTypeDefaultDescription
colorsColorEntry[]requiredArray of color entries to render.
columns2 | 3 | 4 | 5 | 64Grid column count on desktop.
size'sm' | 'md' | 'lg''md'Swatch square size.

ColorEntry

PropTypeDefaultDescription
namestringrequiredDisplay name, e.g. "Primary 500".
valuestringrequiredCSS value — hex, rgb/rgba, hsl, or var() reference.
textDarkbooleanautoForce dark label text. Auto-detected from luminance for hex/rgb/hsl; defaults to white for CSS variables and unresolvable HSL.

Behaviour

  • Click any swatch to copy its value to the clipboard. A brief “Copied” state flashes for 1800 ms.
  • Label text color is chosen per swatch from the value’s luminance (WCAG 2.1 relative luminance). Override with textDark: true.
  • Clipboard errors (non-HTTPS origin, denied permission) are caught silently — no visible failure.

Usage in .astro and MDX

Drop <ColorSwatch> straight into MDX or .astro — no client directive required. The swatch becomes interactive on first user input.