Three staggered pulsing dots inside a pill, paired with an optional label.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress4 } from "@/components/beste/piece/progress4";
<Progress4
label="Thinking"
tone="primary"
/>Numbered step dots connected by a line. Completed steps fill emerald with a check.
Labelled progress bar with a percent readout above and a tonal fill.
Vertical tube that fills bottom-up with a gradient, paired with a percent readout and label.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.
Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.
Card skeleton with an optional avatar placeholder and shimmer lines of varied widths.