A wide panel with a titled header row and three metrics split by vertical hairlines, each carrying its own signed change.
This week
Mon – SunBooked
142
+9
No-shows
3
-4
Hours
96
0
New here? Read the installation guide.
import { Dashboard33 } from "@/components/beste/piece/dashboard33";
<Dashboard33
title="This week"
range="Mon – Sun"
items={[
{
"label": "Booked",
"value": "142",
"delta": "+9",
"direction": "up"
},
{
"label": "No-shows",
"value": "3",
"delta": "-4",
"direction": "down"
},
{
"label": "Hours",
"value": "96",
"delta": "0",
"direction": "flat"
}
]}
/>Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.
Collected this month
vs last month
A single metric with a headline value, a signed trend, and an area sparkline of its recent trajectory.
Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.
Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.