Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.
New here? Read the installation guide.
import { Dashboard30 } from "@/components/beste/piece/dashboard30";
<Dashboard30
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.
Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.