3 variants

Stats

The numbers a landing page leans on, counting up the first time they are seen.

Row

Four figures under a hero, divided, counting up left to right.

What the last quarter looked like

Figures Acme publishes every quarter, reconciled the same way the product reconciles yours.

Finance teams: 1,284
Invoices reconciled: 1.5M
Payout accuracy: 99.97%
Hours back per close: 41h

page.tsx

import { StatsRow } from "@/components/blocks/stats-row";

export default function Page() {
  return (
    <StatsRow
      title="What the last quarter looked like"
      stats={[
        { value: 1482390, label: "Invoices reconciled", compact: true },
        { value: 99.97, label: "Payout accuracy", suffix: "%", decimals: 2 },
      ]}
    />
  );
}

"use client";

import { NumberTicker } from "@/components/registry/number-ticker";
import { cn } from "@/lib/utils";

export interface StatEntry {
  /** The number itself. Formatting is the ticker's job, not the caller's. */
  value: number;
  label: string;
  /** One quieter line under the label. */
  detail?: string;
  prefix?: string;

69 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/stats-row

Panel

One number carrying the section, its own history under it as a row of bars, and the supporting figures stacked down the side.

Reconciliation

Numbers that agree with the bank

Every charge, refund and plan change matched to a payout before anyone opens a spreadsheet.

Closed four hours early

Invoices reconciled

Since Acme turned it on

6.2%

1,482,390

Payout accuracy: 99.97%
Disputes auto-matched: 3,214
Hours saved a month: 96

page.tsx

import { StatsPanel } from "@/components/blocks/stats-panel";

export default function Page() {
  return (
    <StatsPanel
      eyebrow="Reconciliation"
      title="Numbers that agree with the bank"
      status="Closed four hours early"
      lead={{
        value: 1482390,
        label: "Invoices reconciled",
        detail: "Since Acme turned it on",
        change: 6.2,
        series: [14, 17, 16, 21, 19, 24, 22, 27, 31, 28, 34, 30],
      }}
      stats={[
        { value: 99.97, label: "Payout accuracy", suffix: "%", decimals: 2 },
      ]}
    />
  );
}

"use client";

import { ArrowUpRight } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { NumberTicker } from "@/components/registry/number-ticker";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface PanelStat {
  value: number;
  label: string;
  /** One quieter line under the number. */

150 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/stats-panel

Spotlight

An editorial layout: the claim on the left, a tinted figure beside it, and the evidence underneath at three different weights.

Where the month goes

Closing the books stopped being a week of work

Acme reconciles overnight, so the first morning of the month is a review rather than a rebuild.

Hours back on every close

Measured against the same team's last quarter on spreadsheets.

Books closed on day one

78%

Up from 12% before Acme

Finance teamsOn Acme today: 1,284
Currencies settled: 34
Ledger entries a day: 2.1M
Minutes to first report: 9m

page.tsx

import { StatsSpotlight } from "@/components/blocks/stats-spotlight";

export default function Page() {
  return (
    <StatsSpotlight
      eyebrow="Where the month goes"
      title="Closing the books stopped being a week of work"
      headline={{ value: 41, label: "Hours back on every close" }}
      meter={{ label: "Books closed on day one", percent: 78 }}
      stats={[{ value: 1284, label: "Finance teams", detail: "On Acme today" }]}
    />
  );
}

"use client";

import { motion, useReducedMotion } from "motion/react";
import { NumberTicker } from "@/components/registry/number-ticker";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface SpotlightStat {
  value: number;
  label: string;
  /** One quieter line under the number. */
  detail?: string;

126 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/stats-spotlight