Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard11 } from "@/components/beste/piece/dashboard11";
<Dashboard11
title="Top performers"
entries={[
{
"name": "Ada L.",
"score": "12,840"
},
{
"name": "Marcus R.",
"score": "10,320"
},
{
"name": "Priya S.",
"score": "8,960"
}
]}
/>Seven vertical bars for a rolling week with muted fills for past days and a tone-saturated bar for today's total.
Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.
Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.
Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.
Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.
Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.