# Staged Progress Bar

> Staged progress bar for React and Tailwind CSS (shadcn/ui) that splits one progress bar into named, weighted stages such as Build, Test, Upload and Verify, and rides the current stage label on the fill head as it advances. It is built to tell people which step a job is in and what comes next, not just a percentage, and to end with a clear done pill instead of a full bar that just sits there. A staged progress bar is a determinate progress indicator whose track is divided into labeled segments; this one takes stages with ids, labels and weights and a value from 0 to 100, animates the fill and the head with the Web Animations API, rolls the label at each stage boundary, colors completed stages with the shadcn chart accent, turns a failed stage destructive with a Retry pill and onRetry, fires onComplete, optionally collapses into a Done pill, falls back to an indeterminate shimmer when the value is unknown, exposes role progressbar with aria-valuetext per stage, and respects reduced motion. Use it for uploads, deployments, imports, AI generation jobs and onboarding checklists. The included demo runs a deploy, a failed import with retry, and a queued job and makes no requests. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Progress, Loader, Upload, Stepper, Animation
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/staged-progress-bar

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/staged-progress-bar?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/progress.md