Triple Stat Grid

128KUsers
4.2MEvents
99.98%Uptime
About this piece

Triple Stat Grid

Three stats side by side inside one card, separated by vertical dividers.

Usage

The import and the props worth knowing about, in one place.

import { Stats3 } from "@/components/beste/piece/stats3";

<Stats3
  surface="card"
  bordered={true}
  inverted={false}
  items={[
    {
      "value": "128K",
      "label": "Users"
    },
    {
      "value": "4.2M",
      "label": "Events"
    },
    {
      "value": "99.98%",
      "label": "Uptime"
    }
  ]}
/>

More Stats pieces

View all Stats
$48KRevenue
2,340Orders
12.4%Conversion
6:42Avg session

Mini Dashboard

2x2 grid of stat cells inside one card, separated by a thin cross divider.

#12of 500
Weekly leaderboardTop 3%

Rank Card

Gold trophy tile beside a #rank-of-total position, a context label, and an emerald percentile flag.

Visits this month

1,28412.4%

vs. 1,142 last month

Trend Stat Card

A compact metric card pairing a large figure with a signed change chip, a small bar history, and a comparison caption.

2.8×Faster than last quarter

Icon Stat Tile

Colored icon tile beside a bold stat and a one-line description.

Time to first booking

Before

9 days

across three systems

After

4 hours

on one workspace

Median across eleven practices that switched last quarter.

Before And After Pair

A comparison card putting a muted starting figure and an accented result either side of an arrow, with a footnote explaining the sample.

128KActive usersAcross 42 countries

Big Stat

Large headline number with an uppercase label and an optional tiny hint line.