Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.
The import and the props worth knowing about, in one place.
import { Dashboard30 } from "@/components/beste/piece/dashboard30";
<Dashboard30
surface="card"
bordered={true}
inverted={false}
rows={[
{
"label": "Signups",
"value": "382",
"delta": "+12%",
"values": [
14,
18,
16,
22,
24,
28,
32
]
},
{
"label": "Revenue",
"value": "$18.4K",
"delta": "+6%",
"values": [
120,
132,
128,
140,
152,
168,
184
]
},
{
"label": "MAU",
"value": "9.8K",
"delta": "+3%",
"values": [
80,
82,
85,
84,
88,
92,
98
]
}
]}
tone="violet"
/>Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.
Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.
Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.
Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.