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
Section titled “Compact variant”Display colors in a simple grid layout with color names and values.
<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
Section titled “Table variant”Organize colors into labeled rows for design system documentation.
Primary
Secondary
<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
Section titled “Color formats”The component supports all CSS color formats including hex, rgb, rgba, hsl, and oklch.
<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
Section titled “Theme-aware colors”Define different colors for light and dark modes using an object with light and dark properties.
<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
Section titled “Properties”-
variant(string, required) — Display style for the color palette. Options:compactortable. -
children(Color.Item | Color.Row, required) — Color items or rows to display. -
className(string) — Additional CSS classes to apply to the color palette.
Color.Row
Section titled “Color.Row”-
title(string) — Label for the row of colors. Supports inline Markdown formatting, such as**bold**,_italic_, and`code`. -
children(Color.Item, required) — Color items to display in the row.
Color.Item
Section titled “Color.Item”-
name(string) — Name or label for the color. -
value(string | , required) — Color value in any CSS format, or an object with light and dark mode values.