Question 1

What is a shadcn progress?

Accepted Answer

A shadcn Progress is a horizontal bar that visualizes a value between 0 and 100 — file uploads, multi-step form completion, goal tracking, quiz progress, profile-completion meters. It's built on Radix UI's Progress primitive (proper ARIA progressbar role with aria-valuenow/valuemin/valuemax) and styled with shadcn/ui as a thin two-color bar.

Question 2

Are these progress examples free?

Accepted Answer

Yes, every progress example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

How is Progress different from a Spinner?

Accepted Answer

Progress for DETERMINATE actions where you know how complete the task is (uploaded 47%, sent 12 of 100 messages). Spinner for INDETERMINATE actions where you only know it's in flight (waiting for an API response, computing). Showing a Progress bar at fake 90% "because users like progress" is a dark pattern — they'll wait, they'll see it stuck, they'll lose trust. Use Spinner when you can't measure progress.

Question 4

When should I use a Progress versus a percentage label or a circular meter?

Accepted Answer

Linear Progress for tasks with a clear start and end (uploads, form completion). Circular meter (radial chart) for ambient indicators that don't dominate the layout (battery, score). Plain percentage label for compact spaces where the bar would be too small to be useful (table cells, compact rows). The right answer depends on the data's importance and the available real estate.

Question 5

How do I show progress with a label ("45%" or "Step 3 of 5")?

Accepted Answer

Use the with-label variant. Pair the Progress bar with a `<p className="text-sm text-muted-foreground">` showing either a percentage or step count. For multi-step flows, "Step 3 of 5" reads better than "60%" — users care about position more than fraction. For uploads / time remaining, "45% — 12 seconds remaining" combines visual + textual feedback.

Question 6

How do I color the progress bar based on the value (red < 30%, green > 70%)?

Accepted Answer

Use the colored variant. Compute a className based on the value — `value < 30 ? 'bg-destructive' : value > 70 ? 'bg-emerald-500' : 'bg-amber-500'`. Pair with a contextual label so the color isn't the only meaning carrier (color-blind users miss it). Useful for quota meters, password strength indicators, profile completion.

Question 7

How do I size the progress bar for different contexts?

Accepted Answer

Default `h-2` works for most cases. For dense table-row progress (project completion in a 30-row table), drop to `h-1`. For hero-style progress (onboarding completion, feature discovery), scale to `h-3` or `h-4` for visibility. For full-page progress strips at the top of the viewport (page navigation in a scrolling article), use `h-1` so it doesn't dominate.

Question 8

How do I install a progress example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/progress/…`, plus the shadcn/ui Progress primitive (and its Radix dependency) if you don't already have it.

Question 9

How do I animate the progress bar smoothly as the value changes?

Accepted Answer

Radix Progress already animates the inner bar via CSS transition on transform. For custom durations or easing, add `transition-transform duration-500 ease-out` to the indicator. For uploads where the value updates rapidly (every chunk), throttle the React state updates to ~100ms so React doesn't re-render on every progress event — the visual update is smooth but the JS work is bounded.

Question 10

How do I show indeterminate progress (don't know the percentage)?

Accepted Answer

Don't use Progress — use Spinner instead. If you really need a horizontal indeterminate indicator (long-form upload where the server doesn't report progress), animate the bar with a CSS infinite scroll: a 30%-wide bar that translates from 0% to 100% in a 1.5s loop. The shadcn Skeleton primitive already has this CSS pattern; copy it into your indeterminate Progress wrapper.

Question 11

Which libraries do progress examples depend on?

Accepted Answer

Radix UI Progress (the primitive — ARIA progressbar role, value attributes, indicator transform), shadcn/ui Progress (the styled wrapper generated into your project), Tailwind CSS. React 19 baseline. No state library — value lives in the parent's useState or your data fetching state.

Question 12

Are progress examples accessible for screen reader users?

Accepted Answer

Yes. Radix Progress sets `role="progressbar"` and `aria-valuenow="45"` / `aria-valuemin="0"` / `aria-valuemax="100"` automatically. Screen readers announce the value and update on change. Pair the visual bar with an adjacent label ("45%" or "Step 3 of 5") so SR users who linearly read the page also get the value as text. For indeterminate progress, omit `value` and Radix sets `aria-busy="true"`.

Question 13

Can I use these progress examples with React Server Components?

Accepted Answer

Static progress (a fixed value rendered server-side) works as a Server Component. Dynamic progress (value driven by useState, useEffect, or async events) needs a client boundary. For server-streamed progress (an upload tracked via Server Actions), the form fires the action and a small client wrapper polls / subscribes to the action's progress state.

React Progress Examples for shadcn/ui

Browse every progress example

Frequently Asked Questions