Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard26 } from "@/components/beste/piece/dashboard26";
<Dashboard26
heading="Milestones"
steps={[
{
"label": "Design",
"date": "Apr 2"
},
{
"label": "Build",
"date": "Apr 12"
},
{
"label": "QA",
"date": "Apr 22"
},
{
"label": "Launch",
"date": "May 3"
}
]}
current={2}
tone="violet"
/>Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.
Status-page timeline where every day is a thin vertical tile colored by up, degraded, outage, or no-data state.
Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.
Actual-vs-target bar with a tone-colored actual fill on a muted track and a thin foreground tick marking the target.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Recent-events list with semantic action icons (create, update, delete, signup) and a relative timestamp on the right.