Metric Comparison

Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.

Conversion rate+12%
Last week3.41%
This week3.82%

New here? Read the installation guide.

Import & use
import { Dashboard10 } from "@/components/beste/piece/dashboard10";

<Dashboard10
  label="Conversion rate"
  currentLabel="This week"
  currentValue="3.82%"
  previousLabel="Last week"
  previousValue="3.41%"
  delta={12}
/>

More Dashboard pieces

View all Dashboard
ARR$1.82M+8.4%
Churn2.1%-0.3%
NPS48+6%

Metric Trio

Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.

Sessions
This weekLast week

Compare Lines

Dual-line sparkline overlaying the current period in tone and the previous period as a faint dashed baseline with a legend.

Active users+6.8%
4,821

Sparkline Card

Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.

Q2 revenue goal
$148Kof $240K
$92K to goal28 days left

Goal Card

Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.

MRR$48.2K
+12.4%vs last month

KPI Tile

Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.

Top performers
Ada L.12,840
Marcus R.10,320
Priya S.8,960

Leaderboard

Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.

Markdown version