Uppercase caption over a big value on the left, paired with a tone-colored sparkline on the right.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Stats4 } from "@/components/beste/piece/stats4";
<Stats4
label="Active users · 30d"
value="128,420"
data={[
22,
28,
24,
34,
40,
38,
48,
52,
60,
58,
72,
84
]}
tone="success"
/>Large headline number with an uppercase label and an optional tiny hint line.
Headline value with a signed trend arrow, percentage, and period caption.
Colored icon tile beside a bold stat and a one-line description.
Two values separated by an arrow. Before strikes through muted, after lands in emerald.
Gradient hero card with a huge headline number, uppercase label, and a short context caption.
Pinging emerald dot next to a big count and an uppercase caption. Reads as a live realtime figure.