Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard22 } from "@/components/beste/piece/dashboard22";
<Dashboard22
label="Weekly sessions"
actual={186}
target={220}
max={300}
suffix=""
targetMetLabel="Target met"
toTargetLabel="to target"
maxLabel="max"
tone="emerald"
/>Average rating with a star, total review count, and five rows showing per-star counts with an amber proportional bar.
Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.
Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.
Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.
Twenty-four hour activity strip with tone bars whose opacity scales with each hour's volume, labeled 00 to 24.
Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.