> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/statistic.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Statistic

Display metrics and countdowns. Numbers initially count up or down from 0 to the target. Later changes animate from the currently displayed value to the new target.

## Basic usage


Revenue

¥12,856.80

Growth

12.5%

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/statistic/basic.tsx"
import { Space, Statistic } from '@ifhover/leaf-ui';

import { ArrowUp } from 'lucide-react';

export function StatisticBasic() {
  return (
    <Space size={32} wrap>
      <Statistic title={'Revenue'} value={12856.8} precision={2} prefix="¥" />
      <Statistic
        title={'Growth'}
        value={12.5}
        precision={1}
        prefix={<ArrowUp size={20} />}
        suffix="%"
      />
    </Space>
  );
}
```

Expand code

## Value animation

Set `initialValue` to choose the starting number for the first animation. The default duration is 1000 milliseconds; use `duration` to adjust it. Repeated increases or decreases continue from the currently displayed value. Replay remounts the example to start again from 1,000.


Revenue

¥1,286.50

IncreaseDecreaseReplay from 1,000

animation.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/statistic/animation.tsx"
import { Button, Space, Statistic } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function StatisticAnimation() {
  const [value, setValue] = useState(1286.5);
  const [replay, setReplay] = useState(0);
  return (
    <Space direction="vertical" size={20}>
      <Statistic
        key={replay}
        title={'Revenue'}
        value={value}
        initialValue={1000}
        precision={2}
        prefix="¥"
      />
      <Space wrap>
        <Button onClick={() => setValue((current) => current + 500)}>
          {'Increase'}
        </Button>
        <Button variant="outline" onClick={() => setValue((current) => current - 500)}>
          {'Decrease'}
        </Button>
        <Button variant="outline" onClick={() => setReplay((current) => current + 1)}>
          {'Replay from 1,000'}
        </Button>
      </Space>
    </Space>
  );
}
```

Expand code

Set `animation={false}` or `duration={0}` to display the target immediately. Animation follows the regional motion speed, `ConfigProvider`'s `theme.motion`, and the system reduced-motion preference. Counting starts after `loading` ends. Only finite `number` values animate; strings and nonfinite numbers display immediately. `formatter` receives the intermediate numbers. Server rendering outputs the target, and animation starts after the client mounts. Countdown updates remain immediate.

## Countdown


Time until the event

01:00:00

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/statistic/basic.tsx"
import { Countdown } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function StatisticCountdown() {
  const [deadline] = useState(() => Date.now() + 3600000);
  return <Countdown title={'Time until the event'} value={deadline} />;
}
```

Expand code

## Statistic API

| Property       | Type                                     | Default | Description                                                                                                                    |
| -------------- | ---------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `title`        | `ReactNode`                              | —       | Title content.                                                                                                                 |
| `value`        | `number \| string`                       | —       | Required. Controlled value.                                                                                                    |
| `precision`    | `number`                                 | —       | Decimal precision.                                                                                                             |
| `grouping`     | `boolean`                                | `true`  | Use localized digit grouping.                                                                                                  |
| `prefix`       | `ReactNode`                              | —       | Leading content.                                                                                                               |
| `suffix`       | `ReactNode`                              | —       | Trailing content.                                                                                                              |
| `formatter`    | `(value: number \| string) => ReactNode` | —       | Customize the displayed metric value.                                                                                          |
| `loading`      | `boolean`                                | —       | Show a loading state.                                                                                                          |
| `animation`    | `boolean`                                | `true`  | Animate numeric value changes.                                                                                                 |
| `initialValue` | `number`                                 | `0`     | Starting value for the first animation; later changes start from the current displayed value.                                  |
| `duration`     | `number`                                 | `1000`  | Animation duration in milliseconds at the default motion speed, scaled by the regional motion duration; 0 updates immediately. |

## Countdown API

| Property           | Type                          | Default      | Description                                                               |
| ------------------ | ----------------------------- | ------------ | ------------------------------------------------------------------------- |
| `title`            | `ReactNode`                   | —            | Title content.                                                            |
| `prefix`           | `ReactNode`                   | —            | Leading content.                                                          |
| `suffix`           | `ReactNode`                   | —            | Trailing content.                                                         |
| `loading`          | `boolean`                     | —            | Show a loading state.                                                     |
| `value`            | `number \| Date`              | —            | Required. Deadline as a Date or a millisecond timestamp.                  |
| `format`           | `string`                      | `'HH:mm:ss'` | Format using DD, HH, mm, ss, SSS; HH can show total hours.                |
| `onFinish`         | `() => void`                  | —            | Called once on completion.                                                |
| `onChange`         | `(remaining: number) => void` | —            | Called when the value changes.                                            |
| `initialRemaining` | `number`                      | —            | Remaining milliseconds for SSR; updates from the deadline after mounting. |

## Types and interaction

Import the props and data types when creating reusable configuration.

```ts
import type { StatisticProps, CountdownProps } from '@ifhover/leaf-ui';
```

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.