Progress Bar

Progress bars display the current progress of an operation. They provide visual feedback on completion percentage.

Progress Bar Label Playground

Preview

Code

65%

Syncing files...

Controls

Progress (65%)

Type:

Status

Plan Usage

Size:

Small

Default

Progress Bar Playground

Preview

Code

65%

Controls

Progress (65%)

Size:

Small

Default

Label:

Installation

You can add the progress bar component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/progress

Copy and paste the following code into your project.

ProgressBar.tsx

ProgressBarLabel.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { ProgressBar } from '@versaui/ui/components/ProgressBar';
// Basic progress bar
<ProgressBar value={50} />
// Small size
<ProgressBar size="small" value={30} />
// Full progress
<ProgressBar value={100} />

Accessibility

Uses role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
Accessible label via aria-label prop
Visual percentage complements the semantic role

ProgressBar Props

Prop	Type	Default	Description
`size`	`'default' \| 'small'`	`'default'`	Bar thickness variant.
`value`	`number`	`0`	Progress percentage (0–100).
`showLabel`	`boolean`	`true`	Show percentage label.
`aria-label`	`string`	`'Progress'`	Accessible label.
`className`	`string`	`''`	Additional CSS classes.

ProgressBarLabel Props

Prop	Type	Default	Description
`type`	`'status' \| 'planUsage'`	`'status'`	Label layout type.
`size`	`'default' \| 'small'`	`'default'`	Bar thickness variant.
`value`	`number`	`0`	Progress percentage (0–100).
`title`	`string`	`'Seats'`	Label title text.
`titleValue`	`string`	`'5/20'`	Usage count text.
`statusLeft`	`string`	`'25% used'`	Left status text.
`statusRight`	`string`	`'15 remaining'`	Right status text.
`statusText`	`string`	`'Uploading...'`	Status mode description.