Progress
A React component in Beamline's Feedback category.
How much of a known task is done, or a moving bar when the length is unknown, with an optional label and value.
Use it for
- Known progress of a task: import, upload, onboarding completion.
Not for
- Unknown duration (spinner). Usage against a limit (usage-meter).
Anatomy
- root wrapper (Radix progress track inside)
- header (label, value)
- track
- fill
Variants
- tone: accent, success, warning, danger
- size: sm, md
States
- determinate (value)
- indeterminate (value null)
- complete (value = max)
Keyboard
- Not focusable; exposes role progressbar with value.
Motion
The fill eases to each new value over --pui-duration-standard; the indeterminate bar sweeps until a value arrives and stands still under reduced motion. When the value changes, the change itself stays in view for a moment (_shared/delta-ghost): what was lost sits as a pale ghost under the fill, holds about 0.7 s and drains toward the new end; what was gained arrives lit and cools over about 1.3 s. The ghost spans the real before and after, never an in-between value; a run of changes the same way extends one ghost. Reduced motion: the ghost is shown still for 1.1 s, then removed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | 0 | null when the length is unknown. |
max | number | 100 | |
label | ReactNode | — | Shown above the bar and used as its accessible name. |
showValue | boolean | — | Shows the percentage (or value/max with format). |
format | (value, max) => string | — | Custom value text, e.g. '12 of 40 files'. |
tone | "accent" | "success" | "warning" | "danger" | "accent" | |
size | "sm" | "md" | "md" | |
classNames | ProgressClassNames | — | |
style / ref | CSSProperties / native Ref | — | Root styles; ref targets native wrapper div. |
Dependencies
@radix-ui/react-progress, lucide-react, motion
Import
import { Progress } from "@/components/progress/progress";Get it
Progress is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Feedback
- Alert: A message that stays until it is dealt with: what happened, what to do, an action; danger and warning are announced; dismissing folds its height away.
- Announcement bar: A banner across the top for news and offers: messages take turns, a countdown ticks, and dismissing folds it away and can remember it.
- Empty state: What a place will hold and the first step to fill it, instead of a blank; a compact size for panels and filtered tables.
- Notification centre: Updates that wait to be read: a bell with the unread count opens All / Unread, new and earlier groups, and per item mark read or dismiss.
- Skeleton: Holds the shape of content while it loads, then crossfades into it, so nothing jumps.
- Spinner: A ring that spins while work runs and closes into a drawn check or cross when it ends.
- Usage meter: An allowance and what fills it: one bar split by source, the room left, a warning near the limit and the overflow in its own red well past a notch at the…