Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.
The import and the props worth knowing about, in one place.
import { Dashboard2 } from "@/components/beste/piece/dashboard2";
<Dashboard2
surface="card"
bordered={true}
inverted={false}
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.
Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.