Progress
Show how much of a known task is complete.
pnpm dlx shadcn@latest add @uiarc/progressLive · keyboard ready
- Determinate progress for uploads, imports, or long tasks.
- Progress with a visible percentage and a check at completion, via showValue.
- Use skeleton while content is loading with no progress to report.
- Use usage-meter for quota against a limit, and gauge for dashboard metrics.
- Use stepper to show position in a multi-step flow.
Installation
Add Progress with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/progressAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Progress } from "@/registry/components/progress/progress"; export function UploadProgress({ sent, size }: { sent: number; size: number }) { return <Progress label="Uploading report.pdf" value={sent} max={size} showValue />;}Progress
A linear progress bar with an optional label and a counted percentage that matches the fill.
PropTypeDefaultDescription
valuenumber0Current value, clamped between 0 and max.maxnumber100Value that counts as complete.labelstring–Visible label and aria-label. Falls back to "Progress" for assistive tech.showValuebooleanfalseShows the counted percentage and a check at 100%....propsOmit<HTMLAttributes<HTMLDivElement>, "children">–Forwarded to the progressbar element, such as className.- Renders role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and a percentage aria-valuetext.
- Label changes crossfade; outgoing copies are aria-hidden while they fade.
- It is not a live region; announce completion separately if it matters.
- One smooth spring drives both the fill and the counted number, so they always agree. The fill slides in from the left to keep its rounded end.
- At 100% the fill turns to the success colour and a check settles in beside the count.
- Reduced motion jumps the fill and count to the new value.
- The bar fills its container width, so it works in cards, rows, and full-width layouts.
- One spring drives both the fill and the counted number; no observers or timers.
- It is not a live region, so announce completion separately if it matters.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for determinate task progress. Use skeleton while content has no progress to report, gauge or activity-rings for dashboard metrics, and usage-meter for quota against a limit.
- Pass raw value and max; the percentage is computed and clamped for you.
The full library index for assistants is at /llms.txt.