Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.
The import and the props worth knowing about, in one place.
import { Dashboard18 } from "@/components/beste/piece/dashboard18";
<Dashboard18
surface="card"
bordered={true}
inverted={false}
title="Sessions"
currentLabel="This week"
previousLabel="Last week"
current={[
22,
28,
24,
33,
31,
40,
46
]}
previous={[
18,
21,
26,
25,
29,
32,
30
]}
tone="violet"
/>Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.
Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.
Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.
Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.