Progress Bar

ProgressBar

Loading…1%

This is an example of a progress bar indicating 50% completion.

Installation

Add the component with the CLI.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/progress-bar

Manual installation

Install the dependencies, then copy the component source into your project.

npm

pnpm

yarn

bun

npm install cn

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>