Shadcn.io is not affiliated with official shadcn/ui
Shadcn Progress
React progress for uploads, form steps, and long-running tasks. Built with TypeScript and Tailwind CSS for Next.js using Base UI — a track that fills as value moves.
Progress is a track that fills as a number moves toward max. Use it for uploads, wizard steps, and jobs where you can measure completion. If you cannot, use a Spinner.
Looking for a neobrutalism version for shadcn?
Same progress, thicker borders. The NeoBrutalism progress is the kit if you want that look.
Usage
import { Progress } from "@/components/ui/progress"<Progress value={33} />value is the fill on the track. Treat it as 0–100 unless you change the indicator math.
Composition
Label
A Field puts the name and the percent above the bar.
Controlled
A Slider owns the number. Progress just paints it.
RTL
Wrap with DirectionProvider and dir="rtl". Add rtl:rotate-180 so the fill grows from the start edge.
API
Prop
Type
The indicator is not exported. Color it with indicatorClassName.
Notes
The fill is 0–100
The indicator does translateX of -(100 - value)%. max is for ARIA. If your source is 150/500, pass 30 as value.
Omit value and the track stays empty. There is no indeterminate animation.
With other components
Name and percent above
SliderScrub the same value
ButtonCancel a long job
AttachmentByte count on a file
CardBar in a status card
FormStep count in a wizard
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Popover
React popover for settings panels, filters, and inline forms. Built with TypeScript and Tailwind CSS for Next.js using Base UI — click to open, no focus trap.
Questionnaire
React questionnaire for onboarding, intake, and research flows. Built with TypeScript and Tailwind CSS for Next.js using Base UI — choices, freeform, skip, and progress.