ColorPalette / ColorSwatch

Usage

<ColorPalette>
  <ColorSwatch name="Primary" hex="#2563EB" description="CTA buttons, links" />
  <ColorSwatch name="Success" hex="#10B981" description="Positive feedback" />
  <ColorSwatch name="Warning" hex="#F59E0B" description="Caution states" />
  <ColorSwatch name="Danger" hex="#EF4444" description="Errors, destructive actions" />
</ColorPalette>

Hover over a swatch and click to copy its hex value to the clipboard.

Brand palette

Document a tenant's full brand palette in one block. The grid is responsive — 2 columns on mobile, 3 columns on tablet+.

<ColorPalette>
  <ColorSwatch name="Brand 50" hex="#EFF6FF" />
  <ColorSwatch name="Brand 100" hex="#DBEAFE" />
  <ColorSwatch name="Brand 200" hex="#BFDBFE" />
  <ColorSwatch name="Brand 300" hex="#93C5FD" />
  <ColorSwatch name="Brand 400" hex="#60A5FA" />
  <ColorSwatch name="Brand 500" hex="#3B82F6" description="Default tone" />
  <ColorSwatch name="Brand 600" hex="#2563EB" description="Hover state" />
  <ColorSwatch name="Brand 700" hex="#1D4ED8" />
  <ColorSwatch name="Brand 800" hex="#1E40AF" />
  <ColorSwatch name="Brand 900" hex="#1E3A8A" />
</ColorPalette>

Standalone swatch

<ColorSwatch> works outside a <ColorPalette> too — render it inline as a single sample. The grid layout only applies inside the palette wrapper.

Use cases

• Brand guidelines — primary, secondary, neutral palettes with usage notes

• Theme documentation — show what the --docs-* token values resolve to

• Design system — semantic colors (success, warning, danger) and their hex values

• Migration guides — old palette vs new palette side by side

Props

ColorPalette

ColorSwatch