Five stacked rows mapping 5–1 stars to amber fill bars and the percentage for each tier.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress13 } from "@/components/beste/piece/progress13";
<Progress13
distribution={[
68,
22,
6,
3,
1
]}
/>Single horizontal bar divided into tinted segments by percentage, with a legend row below.
Labelled progress bar with a percent readout above and a tonal fill.
Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.
Trophy tile beside a level badge and an XP fraction over a sunset gradient fill bar.
Numbered step dots connected by a line. Completed steps fill emerald with a check.
Three staggered pulsing dots inside a pill, paired with an optional label.