Data

Statistic

Metric display with optional trend arrow (tinted success/danger), prefix/suffix affixes, numeric precision, custom formatter and a loading skeleton.

Import

import { Statistic } from "@zephora/react";

Examples

Basic with affixes

Revenue

$128437.25

Uptime

99.98%

Active users

1.2M

<Statistic title="Revenue" value={128437.25} precision={2} prefix="$" />
<Statistic title="Uptime" value={99.98} precision={2} suffix="%" />
<Statistic title="Active users" value="1.2M" />

Trends

The arrow announces itself as increased / decreased for screen readers.

Conversion

3.42%

Bounce rate

12.7%

<Statistic title="Conversion" value={3.42} precision={2} suffix="%" trend="up" />
<Statistic title="Bounce rate" value={12.7} precision={1} suffix="%" trend="down" />

Loading skeleton

Monthly orders

<Statistic title="Monthly orders" value={8412} loading />

API

Statistic props

Prop	Type	Default	Description
`title`	`ReactNode`	—	Label rendered above the value.
`value` *	`number \| string`	—	The metric itself.
`precision`	`number`	—	Decimal places applied to numeric values (ignored when `formatter` is set).
`prefix`	`ReactNode`	—	Element rendered before the value (icon, currency sign…).
`suffix`	`ReactNode`	—	Element rendered after the value (unit, percent sign…).
`trend`	`"up" \| "down"`	—	Shows an up/down arrow tinted success/danger.
`formatter`	`(value: number \| string) => ReactNode`	—	Custom value renderer — replaces the default number formatting.
`loading`	`boolean`	`false`	Replaces the value with a skeleton bar while data loads.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Typography scale.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.