Two values separated by an arrow. Before strikes through muted, after lands in emerald.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Stats5 } from "@/components/beste/piece/stats5";
<Stats5
label="Page load time"
before="3.4s"
after="0.8s"
beforeCaption="Before"
afterCaption="After"
/>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.
Gold trophy tile beside a #rank-of-total position, a context label, and an emerald percentile flag.
Large headline number with an uppercase label and an optional tiny hint line.
Headline value with a signed trend arrow, percentage, and period caption.