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.

Time to first booking

Before

9 days

across three systems

After

4 hours

on one workspace

Median across eleven practices that switched last quarter.

New here? Read the installation guide.

Import & use
import { Stats17 } from "@/components/beste/piece/stats17";

<Stats17
  title="Time to first booking"
  before={{
    "label": "Before",
    "value": "9 days",
    "caption": "across three systems"
  }}
  after={{
    "label": "After",
    "value": "4 hours",
    "caption": "on one workspace"
  }}
  footnote="Median across eleven practices that switched last quarter."
/>

More Stats pieces

View all Stats
Page load time
Before3.4s
After0.8s

Before / After

Two values separated by an arrow. Before strikes through muted, after lands in emerald.

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.

128KUsers
4.2MEvents
99.98%Uptime

Triple Stat Grid

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

Active users · 30d128,420

KPI Sparkline

Uppercase caption over a big value on the left, paired with a tone-colored sparkline on the right.

$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.