Stats

Responsive grid of metric items with labeled values. Each item can be tinted with a primary or accent color.

Use it to display key numbers on a landing page.

Summary

The Stats component renders a <section> containing a grid of value–label pairs. Each item can be color-coded using the color property to draw attention with the preset's primary or accent color.

Why Use This Component?

Highlight key numbers with consistent formatting across pages.
Color-coded values using the active preset's primary or accent palette.
Preset-aware — typography and spacing adapt to the active preset.

Usage

Options

Prop	Type	Default	Description
`items`	`Array<{ value: string, label: string, color?: 'primary' \| 'accent' }>`	—	Metric items. Required.
`heading`	`string \| undefined`	`undefined`	Optional section heading above the grid.
`description`	`string \| undefined`	`undefined`	Optional description paragraph below the heading.
`surface`	`'alt' \| undefined`	`undefined`	Set to `'alt'` to use the alternate surface background.

Troubleshooting

Color not applying — The color prop accepts 'primary' or 'accent' only. If omitted, the value renders without a color accent.