Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Base UI
Shadcn UIInstallation
npx shadcn@latest add @redpanda/progresspnpm dlx shadcn@latest add @redpanda/progressyarn dlx shadcn@latest add @redpanda/progressbunx shadcn@latest add @redpanda/progressnubx shadcn@latest add @redpanda/progressaube dlx shadcn@latest add @redpanda/progressWhen to use
The Progress component displays completion progress of a task with a visual progress bar. Use this decision tree to determine when it’s appropriate:
Usage
<Progress value={50} />Pass value={null} (or omit value) for an indeterminate loading state.
Compose a label and formatted value with the optional sub-components — the track and indicator are rendered automatically:
<Progress value={50}> <ProgressLabel>Uploading assets</ProgressLabel> <ProgressValue /></Progress>Value range
min and max define the range and default to 0 and 100. Base UI clamps value into that range and derives a
single percentage from it, so the bar and ProgressValue always agree — value={150} across 100–200 renders the
bar half full and reads 50%:
<Progress max={200} min={100} value={150}> <ProgressLabel>Rebalancing partitions</ProgressLabel> <ProgressValue /></Progress>Styling the indicator
Use variant="success" or variant="warning" for an explicit status tone. The default remains the primary fill.
The component does not infer a status from its percentage. Keep a visible label or status icon alongside the color.
<Progress aria-label="Remaining quota" value={12} variant="warning" />Base UI sizes ProgressIndicator by setting its width to that percentage, which is why the fill animates with
transition-[width]. Keep that sizing behavior and use the component’s tone variant instead of restyling descendants. Do not add a
translateX offset (shadcn/ui does that because Radix keeps its indicator full-width), or the percentage is
applied twice and the bar renders short.
Props
Accessibility
- Renders as
role="progressbar"witharia-valuemin,aria-valuemax, andaria-valuenow(or marks as indeterminate whenvalue === null). - Provide an accessible label — render a
<ProgressLabel>(wired to the root viaaria-labelledbyautomatically), setaria-labelon<Progress>, or pointaria-labelledbyat a visible heading — so assistive tech can describe what is loading. - For long tasks (>5s), complement the bar with a textual status such as “Uploading 12 of 48 files” — a bare percentage number rarely tells the user enough to decide whether to wait.