Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
The import and the props worth knowing about, in one place.
import { Dashboard26 } from "@/components/beste/piece/dashboard26";
<Dashboard26
surface="card"
bordered={true}
inverted={false}
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.
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.