Drive icon beside a label, a thin usage bar, and a used-of-total caption that retints as it fills.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress11 } from "@/components/beste/piece/progress11";
<Progress11
used="64 GB"
total="200 GB"
progress={32}
label="Workspace storage"
/>Labelled progress bar with a percent readout above and a tonal fill.
Three staggered pulsing dots inside a pill, paired with an optional label.
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.
Card skeleton with an optional avatar placeholder and shimmer lines of varied widths.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.