Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.
New here? Read the installation guide.
import { Dashboard2 } from "@/components/beste/piece/dashboard2";
<Dashboard2
label="Active users"
value="4,821"
delta="+6.8%"
values={[
22,
28,
24,
33,
31,
40,
38,
46,
44,
52,
58,
64
]}
tone="violet"
/>Collected this month
vs last month
A single metric with a headline value, a signed trend, and an area sparkline of its recent trajectory.
Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.
Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.
This week
Mon – SunBooked
142
+9
No-shows
3
-4
Hours
96
0
A wide panel with a titled header row and three metrics split by vertical hairlines, each carrying its own signed change.