Progress Bar

RAC

Loading…1%

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

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

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

pnpm

yarn

bun

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>