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%

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

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

Date Range Toolbar

dashboard7

Dashboard filter bar with a primary date-range button, a comparison-period dropdown, and a segment filter toggle.

Events this week2,840
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Weekly Bars

dashboard8

Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.

Revenue$48.2K
  • Subscriptions
    52%
  • One-time
    28%
  • Add-ons
    14%
  • Refunds
    6%

Donut Breakdown

dashboard9

Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.

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

Leaderboard

dashboard11

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

Retention
W0W1W2W3W4
W0
100
64
48
41
38
W1
100
71
55
46
W2
100
68
52
W3
100
74

Cohort Retention

dashboard12

Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.

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

Goal Card

dashboard13

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