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

Section headings with ColorRow

Use <ColorRow> inside a <ColorPalette> to label groups of swatches. This is helpful when a single palette contains multiple categories (e.g. brand vs. semantic colors):

<ColorPalette>
  <ColorRow name="Brand" />
  <ColorSwatch name="Brand 500" hex="#3B82F6" />
  <ColorSwatch name="Brand 600" hex="#2563EB" />

  <ColorRow name="Semantic" />
  <ColorSwatch name="Success" hex="#10B981" />
  <ColorSwatch name="Danger" hex="#EF4444" />
</ColorPalette>

Mintlify aliases

For Mintlify compatibility, ColorSwatch also accepts a value prop as an alias for hex. Both produce the same result:

<ColorSwatch name="Primary" value="#2563EB" />

The compound dot-syntax aliases also work — Color.Row maps to ColorRow and Color.Item maps to ColorSwatch:

<ColorPalette>
  <Color.Row name="Neutrals" />
  <Color.Item name="Gray 100" value="#F3F4F6" />
  <Color.Item name="Gray 900" value="#111827" />
</ColorPalette>

Props

ColorPalette

ColorSwatch

ColorRow