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

      • Statistic

      Display metrics and countdowns.

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

      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.

      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.