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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/en/components/statistic.md.
Leaf UIReact components
GitHub

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
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>
  );
}

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
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>
  );
}

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
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} />;
}

Statistic API

PropertyTypeDefaultDescription
titleReactNode—Title content.
valuenumber | string—Required. Controlled value.
precisionnumber—Decimal precision.
groupingbooleantrueUse localized digit grouping.
prefixReactNode—Leading content.
suffixReactNode—Trailing content.
formatter(value: number | string) => ReactNode—Customize the displayed metric value.
loadingboolean—Show a loading state.
animationbooleantrueAnimate numeric value changes.
initialValuenumber0Starting value for the first animation; later changes start from the current displayed value.
durationnumber1000Animation duration in milliseconds at the default motion speed, scaled by the regional motion duration; 0 updates immediately.

Countdown API

PropertyTypeDefaultDescription
titleReactNode—Title content.
prefixReactNode—Leading content.
suffixReactNode—Trailing content.
loadingboolean—Show a loading state.
valuenumber | Date—Required. Deadline as a Date or a millisecond timestamp.
formatstring'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.
initialRemainingnumber—Remaining milliseconds for SSR; updates from the deadline after mounting.

Types and interaction

Import the props and data types when creating reusable configuration.

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.