Color

The <Color> component displays color swatches, for example to document a design system’s palette. Each <Color.Item> shows a swatch with its name and value. A value can differ between light and dark mode.

Usage

primary
#16a34a
surface
#ffffff / #0b0b0b

Markdown

<Color variant="compact">
  <Color.Item name="primary" value="#16a34a" />
  <Color.Item name="surface" value={{ light: "#ffffff", dark: "#0b0b0b" }} />
</Color>

Variants

Table

The table variant groups swatches into titled rows with <Color.Row>.

Brand
brand-500
#0ea5e9
brand-700
#0369a1
Neutral
gray-100
#f3f4f6
gray-900
#111827

Markdown

<Color variant="table">
  <Color.Row title="Brand">
    <Color.Item name="brand-500" value="#0ea5e9" />
    <Color.Item name="brand-700" value="#0369a1" />
  </Color.Row>
  <Color.Row title="Neutral">
    <Color.Item name="gray-100" value="#f3f4f6" />
    <Color.Item name="gray-900" value="#111827" />
  </Color.Row>
</Color>

Properties

variant

'compact' | 'table'Defaults to compact

compact lays out swatches in a grid. table lays out <Color.Row> children as titled rows.

Color.Row

title

string

The row’s label.

Color.Item

value

string | { light?: string; dark?: string }Required

A CSS color, or separate colors for light and dark mode. If only one of light or dark is set, it’s used in both modes.

name

string

The name shown under the swatch.