# antuikit / Statistic

> Statistic, with `Timer` attached. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/statistic

## Install

npx antuikit@latest init
npx antuikit@latest add statistic

## Import

import { Statistic } from "@/components/ui/statistic";

## Demos

- [Basic](https://ui.antuikit.com/embed/statistic/basic.md): A `Statistic` shows a `title` over a `value`, and `precision` fixes the number of decimals, like the two in a balance.
- [Separators](https://ui.antuikit.com/embed/statistic/formatting.md): Set `groupSeparator` and `decimalSeparator` to write a number the way a locale does, like 1.128.932,45 for euros.
- [Custom formatter](https://ui.antuikit.com/embed/statistic/formatter.md): 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](https://ui.antuikit.com/embed/statistic/preformatted.md): Pass `value` a string you formatted yourself, like the output of `Intl.NumberFormat`, and it shows as written.
- [Loading](https://ui.antuikit.com/embed/statistic/loading-state.md): Set `loading` while the number is on its way, and only the value turns into a placeholder while the title stays.
- [Trend](https://ui.antuikit.com/embed/statistic/trend.md): Put a trend arrow in `prefix` and color the value with `classNames`, green for a rise and red for a drop.
- [Against last period](https://ui.antuikit.com/embed/statistic/comparison.md): Metric cards with a line under each number that compares it to last month, with the change worked out from both values.
- [Labeled title](https://ui.antuikit.com/embed/statistic/labeled-title.md): Pass `title` any node, like a label with an icon in front or a hint icon that opens a `Tooltip`.
- [Delta tag](https://ui.antuikit.com/embed/statistic/tag-delta.md): 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](https://ui.antuikit.com/embed/statistic/split-typography.md): Put cents or a unit in `suffix` at a smaller size and a lighter color, so the main figure reads first.
- [Timer](https://ui.antuikit.com/embed/statistic/timer.md): `Statistic.Timer` counts down to a timestamp with `type="countdown"`, or up from one with `type="countup"`.
- [Timer events](https://ui.antuikit.com/embed/statistic/deadlines.md): 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](https://ui.antuikit.com/embed/statistic/timer-chrome.md): Pass `classNames` to style a timer's parts, like a dark tile around the whole timer or a pill around the digits.
- [In cards](https://ui.antuikit.com/embed/statistic/in-cards.md): Each `Statistic` in a small borderless `Card`, laid out in a `Row` of `Col`s, the usual shape of an overview page.
- [Tinted tiles](https://ui.antuikit.com/embed/statistic/tinted-tiles.md): Cards tinted green or red from the color palettes, with `classNames` coloring the title and value to match, for gains and losses.
- [With dividers](https://ui.antuikit.com/embed/statistic/separated-by-rail.md): Set `separator` on `Space` to a vertical `Divider` to split a row of numbers without putting each one in a card.
- [Credit score](https://ui.antuikit.com/embed/statistic/credit-score.md): A credit score with a down arrow in `prefix`, over a stepped `Progress` that takes one color per step.
- [Usage meters](https://ui.antuikit.com/embed/statistic/usage-meter.md): A usage figure beside three kinds of `Progress`: a bar with its label inside, a circle and a dashboard gauge.
- [Quota card](https://ui.antuikit.com/embed/statistic/quota-card.md): 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](https://ui.antuikit.com/embed/statistic/infra-health.md): Pass `classNames` a function of the props to pick a color from the value, like green uptime and amber latency over budget.
- [AI usage](https://ui.antuikit.com/embed/statistic/ai-usage.md): Pass `valueRender` to wrap the value in your own markup, like a `Tooltip` with the exact count over a rounded 4.8M.
- [KPI row](https://ui.antuikit.com/embed/statistic/kpi-row.md): A dashboard's row of four KPI cards, where `classNames.content` colors each trend arrow and its number together.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/statistic`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Statistic` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.