Color

Shows a palette. Clicking a swatch copies its value.

blue-500

#3B82F6

violet-500

#8B5CF6

background

#FFFFFF#0A0A0A

<Color>
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="violet-500" value="#8B5CF6" />
  <Color.Item name="background" value={{ light: "#FFFFFF", dark: "#0A0A0A" }} />
</Color>

A value can be any CSS color (hex, rgb(), rgba(), hsl(), oklch(), …). A { light, dark } pair switches with the site’s theme, and copies the value for the theme that’s showing.

Table

variant="table" groups swatches into titled rows with Color.Row:

Primary

primary-500

#3B82F6

primary-600

#2563EB

Neutral

gray-500

#6B7280

<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
  </Color.Row>
  <Color.Row title="Neutral">
    <Color.Item name="gray-500" value="#6B7280" />
  </Color.Row>
</Color>

Color props

variant"compact" | "table"default: "compact"

Color.Row props

titlestring

The row’s label. Accepts code, **bold**, and *italic*.

Color.Item props

namestring

valuestring | { light, dark }

Any CSS color, or a light/dark pair.