Two values separated by an arrow. Before strikes through muted, after lands in emerald.
The import and the props worth knowing about, in one place.
import { Stats5 } from "@/components/beste/piece/stats5";
<Stats5
label="Page load time"
before="3.4s"
after="0.8s"
beforeCaption="Before"
afterCaption="After"
/>Time to first booking
Before
9 days
across three systems
After
4 hours
on one workspace
Median across eleven practices that switched last quarter.
A comparison card putting a muted starting figure and an accented result either side of an arrow, with a footnote explaining the sample.
Uppercase caption over a big value on the left, paired with a tone-colored sparkline on the right.
Colored icon tile beside a bold stat and a one-line description.
Pinging emerald dot next to a big count and an uppercase caption. Reads as a live realtime figure.