> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/statistic.html

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

# Statistic

Display metrics and countdowns.

## 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

## 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.                 |

## 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.