ProgressBarNew

Import

import { ProgressBar, Label } from '@heroui/react';

Usage

import {Label, ProgressBar} from "@heroui/react";

export function Basic() {
  return (
    <ProgressBar aria-label="Loading" className="w-64" value={60}>

Anatomy

import { ProgressBar, Label } from '@heroui/react';

export default () => (
  <ProgressBar value={60}>
    <Label>Loading</Label>
    <ProgressBar.Output />
    <ProgressBar.Track>
      <ProgressBar.Fill />
    </ProgressBar.Track>
  </ProgressBar>
);

Sizes

import {Label, ProgressBar} from "@heroui/react";

export function Sizes() {
  return (
    <div className="flex w-64 flex-col gap-6">

Colors

import {Label, ProgressBar} from "@heroui/react";

export function Colors() {
  return (
    <div className="flex w-64 flex-col gap-6">

Indeterminate

Use isIndeterminate when progress cannot be determined.

import {Label, ProgressBar} from "@heroui/react";

export function Indeterminate() {
  return (
    <ProgressBar isIndeterminate aria-label="Loading" className="w-64">

Custom Value Scale

Use minValue, maxValue, and formatOptions to customize the value range and display format.

"use client";

import {Label, ListBox, NumberField, ProgressBar, Select, Separator} from "@heroui/react";
import {useState} from "react";

Without Label

When no visible label is needed, use aria-label for accessibility.

import {ProgressBar} from "@heroui/react";

export function WithoutLabel() {
  return (
    <ProgressBar aria-label="Loading progress" className="w-64" value={45}>

Styling

Passing Tailwind CSS classes

You can customize individual ProgressBar parts:

import { ProgressBar, Label } from '@heroui/react';

function CustomProgressBar() {
  return (
    <ProgressBar value={60}>
      <Label>Loading</Label>
      <ProgressBar.Output />
      <ProgressBar.Track className="bg-purple-100 dark:bg-purple-900">
        <ProgressBar.Fill className="bg-purple-500" />
      </ProgressBar.Track>
    </ProgressBar>
  );
}

Customizing the component classes

To customize the ProgressBar component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .progress-bar {
    @apply w-full gap-2;
  }

  .progress-bar__track {
    @apply h-3 rounded-full;
  }

  .progress-bar__fill {
    @apply rounded-full;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ProgressBar component uses these CSS classes (View source styles):

Base & Element Classes

• .progress-bar - Base container (grid layout)
• .progress-bar__output - Value text display
• .progress-bar__track - Track background
• .progress-bar__fill - Filled portion of the track

Size Classes

• .progress-bar--sm - Small size variant (thinner track)
• .progress-bar--md - Medium size variant (default)
• .progress-bar--lg - Large size variant (thicker track)

Color Classes

• .progress-bar--default - Default color variant
• .progress-bar--accent - Accent color variant
• .progress-bar--success - Success color variant
• .progress-bar--warning - Warning color variant
• .progress-bar--danger - Danger color variant

API Reference

ProgressBar Props

Inherits from React Aria ProgressBar.

ProgressBarRenderProps

When using the render prop pattern, these values are provided: