antuikit's Statistic is Ant Design's Statistic, installed into your project as a file you own. It adds no behavior and no styling: it merges your className and types a ref. Statistic.Timer is included, and the deprecated Statistic.Countdown is left out.
Install
npx antuikit@latest init
npx antuikit@latest add statistic
The first command installs AntuikitProvider and the kit's theme, and the second adds this component.
Import
From @/components/ui/statistic, not from antd. The file is yours once it is installed, so the import path is a path in your project.
import { Statistic } from "@/components/ui/statistic"
Sizes and variants
Statistic has none: no size, no variant and no shape. It paints a value and a title and has no container of its own, so any frame the tile seems to have comes from the Card around it.
The one option list belongs to Statistic.Timer: type is countdown or countup.
Flags
One boolean, and it is worth setting.
loading (default false) replaces the value with a shimmering placeholder and keeps the title, so a row of pending tiles keeps its labels.
value defaults to 0, so without loading a figure that has not arrived shows as zero. Turn the flag off on failure as well as on success, or the placeholder never goes away.
Slots
The props that take a node. A slot is where your own markup goes, and it comes before a descendant selector.
title renders in a header above the value. Leave it out and there is no header at all, and the number has no label.
prefix and suffix each sit in a span beside the value. Statistic draws no icon of its own, so a trend arrow here comes from the icon pack your project installs.
valueRender wraps the value instead of sitting beside it. Use it to put the number inside a Tooltip. It passes you a React element, so give the Tooltip its own <span> to attach to.
formatter also takes a node, but it replaces the number instead of surrounding it, and it turns off the separators and precision.
Timer, and the Countdown that is not here
Statistic.Timer looks like a Statistic and counts. It replaces Statistic.Countdown, which is deprecated and which the kit leaves out.
1
// A timestamp, created once. A new one on every render restarts the clock.
onFinish runs once, when a countdown reaches zero, and a new value starts the timer again. onChange runs about sixty times a second with the time left, so set state only when it changes. Timer sets its own formatting, so precision and the separators do nothing here. Shape the clock with format.
Events
onMouseEnter
onMouseLeave
Styling
Statistic names its parts, and classNames and styles take the same keys. Style a part through its key before reaching for a descendant selector, since the keys stay stable across versions.
1
<Statistic
2
classNames={{
3
root: "…",
4
content: "…",
5
value: "…",
6
title: "…",
7
header: "…",
8
prefix: "…",
9
suffix: "…",
10
}}
11
/>
A Tailwind class on one of these keys wins over the default styles without !important. Setting a component token's CSS variable on the root has no effect, so style the part or set the token in your theme.
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.