# Color

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Color swatches with their values - click one to copy its value.

Shows a palette. Clicking a swatch copies its value.

<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>

```mdx
<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`:

<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>

```mdx
<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

**`title`** `string`

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

## Color.Item props

**`name`** `string`

**`value`** `string | { light, dark }`

Any CSS color, or a light/dark pair.