Stat

Stat

Basic Stats

1234Total Users

99.9%Uptime

$12,345Revenue

Stats Grid

42Active Projects

128Team Members

2.5kCommits

99%Test Coverage

Large Numbers

1.2MDownloads

50k+Stars

3.2kContributors

Usage

import { Stat } from "@f0rbit/ui";

<Stat value={42} label="Total Users" />

Numeric Values

<Stat value={1234} label="Total Users" />
<Stat value={99.9} label="Success Rate" />

String Values

Formatted values can be passed as strings:

<Stat value="99.9%" label="Uptime" />
<Stat value="$12,345" label="Revenue" />
<Stat value="1.2M" label="Downloads" />

Stats Grid

Display multiple stats in a grid layout:

<div class="stats-grid">
  <Stat value={42} label="Active Projects" />
  <Stat value={128} label="Team Members" />
  <Stat value="2.5k" label="Commits" />
  <Stat value="99%" label="Test Coverage" />
</div>

Stat with Trend Indicator

Show a trend direction with percentage change:

const TrendStat = (props: {
  value: string | number;
  label: string;
  change: number;
}) => {
  const isPositive = () => props.change >= 0;

  return (
    <div class="stack-xs">
      <Stat value={props.value} label={props.label} />
      <span
        style={{
          color: isPositive() ? "var(--color-success)" : "var(--color-danger)",
          "font-size": "0.875rem",
          display: "flex",
          "align-items": "center",
          gap: "0.25rem",
        }}
      >
        <Chevron direction={isPositive() ? "up" : "down"} size={12} />
        {Math.abs(props.change)}%
      </span>
    </div>
  );
};

<div class="stats-grid">
  <TrendStat value="$48,352" label="Revenue" change={12.5} />
  <TrendStat value="2,847" label="Orders" change={8.2} />
  <TrendStat value="1.2k" label="Returns" change={-3.1} />
  <TrendStat value="4.8" label="Rating" change={0.3} />
</div>

Stat with Comparison

Display values compared to a previous period:

const ComparisonStat = (props: {
  value: string | number;
  label: string;
  previousValue: string | number;
  previousLabel: string;
}) => (
  <div class="stack-xs">
    <Stat value={props.value} label={props.label} />
    <span style={{ color: "var(--text-secondary)", "font-size": "0.75rem" }}>
      vs {props.previousValue} {props.previousLabel}
    </span>
  </div>
);

<div class="stats-grid">
  <ComparisonStat
    value="1,234"
    label="Users this month"
    previousValue="987"
    previousLabel="last month"
  />
  <ComparisonStat
    value="$52k"
    label="Revenue this quarter"
    previousValue="$41k"
    previousLabel="last quarter"
  />
  <ComparisonStat
    value="89%"
    label="Satisfaction rate"
    previousValue="84%"
    previousLabel="last survey"
  />
</div>

Props

Prop	Type	Default	Description
value	string | number	—	The statistic value to display
label	string	—	Label describing the statistic