Thrive Design System

Components

Progress

A visual indicator that shows the completion percentage of a task or process.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Progress } from '@thrivecart/ui';

Examples

Basic Progress

Default

Simple progress bar

<Progress value={60} />

Various States

Progress States

Different completion levels

<div className="flex flex-col gap-4">
<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />
</div>

Best Practices

✓

Show percentage or label

Pair the progress bar with a percentage or descriptive label for clarity.

✓

Update in real-time

Progress should update smoothly as the task advances.

✗

Don't use for indeterminate waits

If you don't know the progress percentage, use Spinner instead.

✗

Don't fake progress

Don't artificially animate progress. Show real completion data.

Props

Props

Accessibility

  • Uses role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax.
  • Screen readers announce the current progress percentage.
  • Ensure the progress bar has sufficient color contrast against its background.