Progress

Determinate completion for uploads, imports, and multi-step work.

Built on Radix UI ProgressUpstream API

Document upload40%

Usage

import { Progress } from "@workshop1/ui/components/progress"

Use progress when the application knows how much work has completed. Pass a value from 0 to 100, show the same value as readable text when precision matters, and keep updates monotonic unless the process genuinely restarts.

Use Spinner for indeterminate work. Do not show a precise percentage backed by a timer or another estimate that cannot represent real completion.

Accessibility

Give the progress bar a visible label through aria-labelledby or an accessible aria-label. Add aria-valuetext when the number needs context beyond a percentage.