Statistic

A number with a label, for dashboards and summaries, and a timer that counts down to a deadline or up from a start.

Basic

A Statistic shows a title over a value, and precision fixes the number of decimals, like the two in a balance.

Separators

Set groupSeparator and decimalSeparator to write a number the way a locale does, like 1.128.932,45 for euros.

Custom formatter

Pass formatter to render the value yourself, as a string like 1.1M or as markup like a balance with dimmed cents.

Pre-formatted value

Pass value a string you formatted yourself, like the output of Intl.NumberFormat, and it shows as written.

Loading

Set loading while the number is on its way, and only the value turns into a placeholder while the title stays.

Trend

Put a trend arrow in prefix and color the value with classNames, green for a rise and red for a drop.

Against last period

Metric cards with a line under each number that compares it to last month, with the change worked out from both values.

Labeled title

Pass title any node, like a label with an icon in front or a hint icon that opens a Tooltip.

Delta tag

Put a Tag in suffix or prefix to show the change as a chip, solid for a headline figure and outlined for a quiet one.

Split typography

Put cents or a unit in suffix at a smaller size and a lighter color, so the main figure reads first.

Timer

Statistic.Timer counts down to a timestamp with type="countdown", or up from one with type="countup".

Timer events

Use onFinish to act when a countdown ends and onChange to react while it runs, like a session that warns in its last minute.

Styled timer

Pass classNames to style a timer's parts, like a dark tile around the whole timer or a pill around the digits.

In cards

Each Statistic in a small borderless Card, laid out in a Row of Cols, the usual shape of an overview page.

Tinted tiles

Cards tinted green or red from the color palettes, with classNames coloring the title and value to match, for gains and losses.

With dividers

Set separator on Space to a vertical Divider to split a row of numbers without putting each one in a card.

Credit score

A credit score with a down arrow in prefix, over a stepped Progress that takes one color per step.

Usage meters

A usage figure beside three kinds of Progress: a bar with its label inside, a circle and a dashboard gauge.

Quota card

A quota card with a hint in its title, a thin Progress bar, and a row below for the percentage and the reset period.

Service health

Pass classNames a function of the props to pick a color from the value, like green uptime and amber latency over budget.

AI usage

Pass valueRender to wrap the value in your own markup, like a Tooltip with the exact count over a rounded 4.8M.

In context

The component inside real screens, with the components it usually sits beside.

KPI row

A dashboard's row of four KPI cards, where classNames.content colors each trend arrow and its number together.

API Reference

Statistic
Statistic's props. Rows marked antuikit in the Version column are added by the kit.
Statistic.Timer
Statistic.Timer's props. Rows marked antuikit in the Version column are added by the kit.