Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.
New here? Read the installation guide.
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"
/>Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.
Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.