Skip to main content
Progress component preview (light)
  • Location: sabo/src/components/ui/progress.tsx

​
When to use

  • Indicate completion percentage of a determinate process (0–100).
  • For indeterminate loading, use a Spinner or Skeleton.

​
Usage

sabo/src/components/ui/progress.tsx
import { Progress } from "@/components/ui/progress";

export function Example() {
  return <Progress value={42} className="w-64" />;
}

​
Key props

​
value
number
Progress percent (0–100). The bar translates based on this value.
​
className
string
Width/height or color overrides (e.g., w-64, h-3).

​
Styling tip

  • Increase thickness via h-3 or h-4.
  • Use contextual color by wrapping in themed containers or adjusting bg-primary.

​
Accessibility

  • Provide nearby text for context (“Uploading 42%”).
  • If used as a status, associate with an element describing the task.