Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard29 } from "@/components/beste/piece/dashboard29";
<Dashboard29
metrics={[
{
"label": "ARR",
"value": "$1.82M",
"delta": 8.4
},
{
"label": "Churn",
"value": "2.1%",
"delta": -0.3
},
{
"label": "NPS",
"value": "48",
"delta": 6
}
]}
/>Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.
Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Collected this month
vs last month
A single metric with a headline value, a signed trend, and an area sparkline of its recent trajectory.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.