Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.
The import and the props worth knowing about, in one place.
import { Progress5 } from "@/components/beste/piece/progress5";
<Progress5
segments={6}
filled={4}
tone="emerald"
label="Onboarding"
/>A row of pill segments fills left to right beside a live percentage, flashes a check at one hundred, holds for a beat, and starts over.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.
Five stacked rows mapping 5–1 stars to amber fill bars and the percentage for each tier.