Primitive · CLI
Progress
Task progress with soft-rect fill width tween on Base UI Progress.
Preview
npx shadcn@latest add @atroui/progressUploading
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/progressSource lands in your repo. Installation · Registry
Usage
Use for task completion toward a known end. Pass value={null} for indeterminate. Fill width tweens with fillTween; reduced motion snaps.
tsx
import {
Progress,
ProgressIndicator,
ProgressLabel,
ProgressTrack,
ProgressValue,
} from "@/components/ui/progress"
<Progress value={64}>
<div className="flex items-center justify-between gap-2">
<ProgressLabel>Uploading</ProgressLabel>
<ProgressValue />
</div>
<ProgressTrack>
<ProgressIndicator />
</ProgressTrack>
</Progress>Progress