Introduction

Progress bars communicate the status of ongoing processes such as loading, uploading, or form completion. They support multiple colors, heights, labels, striped patterns, and stacked bars.

Installation

import { Progress, ProgressBar } from '@/components/ui/progress';

Usage

<Progress value={60} />

Examples

Default

ProgressDefault

import { Progress } from '@/components/ui/progress';

export default function Component() {
  return <Progress value={60} />;
}

With Label

Set showLabel and increase height to display the percentage inside the bar.

60%

ProgressWithLabel

import { Progress } from '@/components/ui/progress';

export default function Component() {
  return <Progress value={60} showLabel height="1.25rem" />;
}

Themes

Use ProgressBar children with the theme prop for different colors.

ProgressThemes

import { Progress, ProgressBar } from '@/components/ui/progress';

export default function Component() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={20}><ProgressBar theme="primary" value={20} /></Progress>
      <Progress value={40}><ProgressBar theme="success" value={40} /></Progress>
      <Progress value={60}><ProgressBar theme="warning" value={60} /></Progress>
      <Progress value={80}><ProgressBar theme="danger" value={80} /></Progress>
    </div>
  );
}

Striped & Animated

Add striped and animated props to ProgressBar for visual patterns.

ProgressStriped

import { Progress, ProgressBar } from '@/components/ui/progress';

export default function Component() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={30}><ProgressBar theme="primary" striped value={30} /></Progress>
      <Progress value={50}><ProgressBar theme="success" striped value={50} /></Progress>
      <Progress value={70}><ProgressBar theme="warning" striped animated value={70} /></Progress>
    </div>
  );
}

Multiple Bars

Stack multiple ProgressBar components inside a single Progress.

ProgressMultiple

import { Progress, ProgressBar } from '@/components/ui/progress';

export default function Component() {
  return (
    <Progress value={100}>
      <ProgressBar theme="primary" value={30} />
      <ProgressBar theme="success" value={20} />
      <ProgressBar theme="warning" value={15} />
    </Progress>
  );
}

Sizes

Customize the height via the height prop.

50%

ProgressSizes

import { Progress } from '@/components/ui/progress';

export default function Component() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Progress value={50} height="0.25rem" />
      <Progress value={50} height="0.5rem" />
      <Progress value={50} height="1rem" />
      <Progress value={50} height="1.5rem" showLabel />
    </div>
  );
}

API Reference

Progress

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress value
`max`	`number`	`100`	Maximum value
`height`	`string`	`0.5rem`	Bar height
`showLabel`	`boolean`	`false`	Show percentage label

ProgressBar

Prop	Type	Default	Description
`theme`	`primary \| secondary \| success \| danger \| warning`	`primary`	Color theme
`value`	`number`	`0`	Width percentage
`striped`	`boolean`	`false`	Striped pattern
`animated`	`boolean`	`false`	Animated stripes

Progress

On this page