Progress

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/progress

UsageCopy Anchor Link

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

<Progress aria-label="Uploading files" value={40} />;

With no children, Progress renders a track and indicator. If you pass children, include ProgressTrack and ProgressIndicator yourself.

With label and valueCopy Anchor Link

ProgressLabel also names the progress bar for screen readers.

Formatted valueCopy Anchor Link

Pass a function to ProgressValue to format what it shows.

IndeterminateCopy Anchor Link

Set value={null} when you can't tell how much is left.

<Progress aria-label="Connecting" value={null} />

API referenceCopy Anchor Link

Progress wraps Base UI Progress. Each part accepts the props of its Base UI counterpart.