Progress
Displays an animated progress bar indicating how much of a task or file upload has completed so users know how long to wait.
Installation
pnpm dlx shadcn@latest add @spaceui/primitives-progressUsage
import { Progress, ProgressLabel, ProgressValue } from '@/components/ui/progress'<Progress value={40} />Note: If you render children inside Progress, you must also include ProgressTrack and ProgressIndicator inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.
Features
Indeterminate State
Progress indicator displaying an indeterminate animated loading bar (value={null}).
API Reference
Progress
Root component. Styled wrapper for Progress.Root from Base UI. When no children are provided, automatically renders a track and indicator.
ProgressTrack
Track container for the progress indicator. Styled wrapper for Progress.Track from Base UI.
ProgressIndicator
Visual indicator showing the current progress. Styled wrapper for Progress.Indicator from Base UI.
ProgressLabel
Label text for the progress bar. Styled wrapper for Progress.Label from Base UI.
ProgressValue
Displays the current value. Styled wrapper for Progress.Value from Base UI.