Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.
New here? Read the installation guide.
import { Dashboard3 } from "@/components/beste/piece/dashboard3";
<Dashboard3
widgets={[
{
"label": "Revenue",
"value": "$48.2K",
"icon": "revenue"
},
{
"label": "Orders",
"value": "1,284",
"icon": "orders"
},
{
"label": "Users",
"value": "9.4K",
"icon": "users"
},
{
"label": "Events",
"value": "62.1K",
"icon": "signals"
}
]}
tone="primary"
/>Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.
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.
Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.
Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.