Swatch

Color, gradient, image, and weighted palette swatches with selection, remove, unavailable, and contrast-aware states.

Finishes

Palettes

Gradients

Patina

Copper

Stone

Ember

Moss

Dune

States

Selected

Default

Raised

Unavailable

Distribution

79% assigned21% unassigned

Scale

2xs

base

2xl

3xl

Install

npm install @patternmode/swatch

import { Swatch } from "@patternmode/swatch";
import "@patternmode/swatch/styles.css";

function PalettePreview() {
  return (
    <Swatch
      aria-label="Palette"
      colors={[
        { color: "#315c4b", ratio: 60 },
        { color: "#e1ebe5", ratio: 40 },
      ]}
      shape="pill"
      size="2xl"
    />
  );
}

Core API

`Swatch`

Visual swatch primitive for solid colors, gradients, images, and weighted palettes.

color: stringCSS color value used for a solid swatch fill.
background: stringCSS background shorthand. Takes precedence over color and colors.
colors: Array<string | { color: string; ratio?: number }>Renders multiple color stops as one weighted palette fill.
shape: "circle" | "pill" | "square""circle"Controls the rendered silhouette.
size: "2xs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl""base"Sets the swatch dimensions.
selected: booleanfalseShows selected state and optional icon overlay.
onRemove: () => voidAdds a hover/focus remove affordance.