Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
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"
/>Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.
Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.