Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Loading example…
Installation
bunx --bun shadcn@latest add @sui/progressInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
Usage
import { Progress } from "@workspace/ui/components/progress"<Progress value={33} />Composition
With label and value
Use ProgressLabel and ProgressValue to add a label and value display.
import {
Progress,
ProgressLabel,
ProgressValue,
} from "@workspace/ui/components/progress"
;<Progress value={56} className="w-full max-w-sm">
<ProgressLabel>Upload progress</ProgressLabel>
<ProgressValue />
</Progress>Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
└── ProgressIndicatorLabel
Use ProgressLabel and ProgressValue to add a label and value display.
Loading example…
Controlled
A progress bar that can be controlled by a slider.
Loading example…
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Loading example…
API Reference
See the Base UI Progress documentation.