Progress bar

Task completion at a glance

A horizontal bar that fills to indicate how far through a process or task the user is. Available in default and compact sizes with an optional percentage label.

Default

80%
45%
100%

Compact

tsx
// From the npm package
import { ProgressBar } from 'rift-ds/components/ProgressBar/ProgressBar';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/progress-bar.json