Progress

Default

Pass a value between 0 and 100 to indicate completion. The indicator bar animates smoothly when the value changes.

Multiple States

Show different completion levels to represent various stages of progress.

Installation

npx visor add progress

This copies two files into your project:

• components/ui/progress/progress.tsx — the component
• components/ui/progress/progress.module.css — the styles

Usage

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

export default function UploadProgress({ percent }: { percent: number }) {
  return <Progress value={percent} />;
}

API Reference

ProgressProps

No props data available for “progress”.

The component also accepts all standard Radix UI Progress props.

Accessibility

• Built on @radix-ui/react-progress with correct role="progressbar" semantics.
• Automatically sets aria-valuenow, aria-valuemin, and aria-valuemax attributes.
• Screen readers announce the current progress percentage.