Progress Bar

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/progress-bar

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install tailwind-merge

Anatomy

import { Description, Label } from "@/components/ui/field"
import {
  ProgressBar,
  ProgressBarHeader,
  ProgressBarTrack,
  ProgressBarValue,
} from "@/components/ui/progress-bar"

<ProgressBar value={value}>
  <ProgressBarHeader>
    <Label>Loading…</Label>
    <ProgressBarValue />
  </ProgressBarHeader>
  <ProgressBarTrack />
  <Description>This is an example of a progress bar indicating 50% completion.</Description>
</ProgressBar>

Examples

Indeterminate

An indeterminate progress bar is a type of progress indicator that does not show a specific amount of progress or percentage complete.

Component API

ProgressBar

The ProgressBar component displays determinate or indeterminate progress.

ProgressBarHeader

The ProgressBarHeader component groups progress label and value content.

ProgressBarTrack

The ProgressBarTrack component renders the progress track.

ProgressBarValue

The ProgressBarValue component displays the formatted progress value.

See the React Aria for the full API reference.