KPI Sparkline Card

A single metric with a headline value, a signed trend, and an area sparkline of its recent trajectory.

Collected this month

$92.4K+8.6%

vs last month

New here? Read the installation guide.

Import & use
import { Dashboard32 } from "@/components/beste/piece/dashboard32";

<Dashboard32
  label="Collected this month"
  value="$92.4K"
  delta={8.6}
  period="vs last month"
  data={[
    18,
    24,
    20,
    32,
    28,
    40,
    38,
    52,
    60
  ]}
/>

More Dashboard pieces

View all Dashboard
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.

This week

Mon – Sun

Booked

142

+9

No-shows

3

-4

Hours

96

0

KPI Trio Card

A wide panel with a titled header row and three metrics split by vertical hairlines, each carrying its own signed change.

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.

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.

Signups382
+12%
Revenue$18.4K
+6%
MAU9.8K
+3%

Sparkline Row

Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.

Markdown version