A single metric with a headline value, a signed trend, and an area sparkline of its recent trajectory.
Collected this month
vs last month
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard32 } from "@/components/beste/piece/dashboard32";
<Dashboard32
label="Collected this month"
value="$92.4K"
delta={8.6}
period="vs last month"
data={[
18,
24,
20,
32,
28,
40,
38,
52,
60
]}
/>Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.
Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.
Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.
Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.
Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.
Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.