Goal Card

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

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

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

Import & use
import { Dashboard13 } from "@/components/beste/piece/dashboard13";

<Dashboard13
  label="Q2 revenue goal"
  current="$148K"
  target="$240K"
  ofLabel="of"
  progress={62}
  remaining="$92K to goal"
  deadline="28 days left"
  tone="emerald"
/>

More Dashboard pieces

View all Dashboard
Conversion rate+12%
Last week3.41%
This week3.82%

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

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.

System health
82
Healthy

Health Gauge

dashboard14

Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.

  • Move
    72 kcal
  • Exercise
    54 min
  • Stand
    88 hr

Activity Rings

dashboard15

Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.

api.prod.example99.94%
60 days agoToday

Uptime Status

dashboard16

Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.