Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.
The import and the props worth knowing about, in one place.
import { Dashboard10 } from "@/components/beste/piece/dashboard10";
<Dashboard10
surface="card"
bordered={true}
inverted={false}
label="Conversion rate"
currentLabel="This week"
currentValue="3.82%"
previousLabel="Last week"
previousValue="3.41%"
delta={12}
/>Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.
Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.
Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.
Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.