Color

Display color swatches with hex values and click-to-copy capability using the color component for design system and branding documentation.

Use the Color component to showcase color palettes in your documentation. Display colors in a compact grid or organize them in a table with labeled rows.

Compact variant

Display colors in a simple grid layout with color names and values.

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

Compact example

<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="blue-600" value="#2563EB" />
  <Color.Item name="blue-700" value="#1D4ED8" />
  <Color.Item name="blue-800" value="#1E40AF" />
</Color>

Table variant

Organize colors into labeled rows for design system documentation.

Primary

Secondary

Table example

<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>
  <Color.Row title="Secondary">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>

Color formats

The component supports all CSS color formats including hex, rgb, rgba, hsl, and oklch.

hex

#FF5733

rgb

rgb(51, 255, 87)

rgba

rgba(51, 87, 255, 0.7)

hsl

hsl(180, 70%, 55%)

oklch

oklch(70% 0.2 145)

Color formats example

<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />
  <Color.Item name="rgb" value="rgb(51, 255, 87)" />
  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>

Theme-aware colors

Define different colors for light and dark modes using an object with light and dark properties.

bg-primary

bg-secondary

text-primary

Theme-aware example

<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>

Properties

Color

variant · string · required

Display style for the color palette. Options: compact or table.

children · Color.Item | Color.Row · required

Color items or rows to display.

Color.Row

title · string

Label for the row of colors.

children · Color.Item · required

Color items to display in the row.

Color.Item

name · string

Name or label for the color.

value · string | { light: string, dark: string } · required

Color value in any CSS format, or an object with light and dark mode values.