# Progress · HeroUI

> Migration guide for Progress from HeroUI v2 to v3 (now ProgressBar)

- Page: https://jiguang132.com/systems/heroui/docs/migration/progress
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

> 
  Refer to the [v3 ProgressBar documentation](/systems/heroui/docs/components/progress-bar) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.


> 
  Looking for the CircularProgress migration? See the [CircularProgress migration guide](/systems/heroui/docs/migration/circular-progress).


## Component Rename

`Progress` has been renamed to `ProgressBar` in v3.

## Structure Changes

In v2, `Progress` was a single component configured with props:

```tsx
import { Progress } from "@heroui/react";

export default function App() {
  return (
    <Progress label="Loading..." value={60} />
  );
}
```

In v3, `ProgressBar` uses a compound component pattern:

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

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

## Key Changes

### 1. Component Structure

**v2:** Single `Progress` component with all parts rendered internally
**v3:** Compound components: `ProgressBar`, `ProgressBar.Output`, `ProgressBar.Track`, `ProgressBar.Fill`, plus external `Label`

### 2. Colors

**v2:** `default`, `primary`, `secondary`, `success`, `warning`, `danger`
**v3:** `default`, `accent`, `success`, `warning`, `danger`

### 3. Prop Changes

| v2 Prop | v3 Equivalent | Notes |
|---------|---------------|-------|
| `value` | `value` | Same |
| `minValue` | `minValue` | Same |
| `maxValue` | `maxValue` | Same |
| `isIndeterminate` | `isIndeterminate` | Same |
| `formatOptions` | `formatOptions` | Same |
| `size` | `size` | Same (`sm`, `md`, `lg`) |
| `color` | `color` | `primary` → `accent`, `secondary` removed |
| `label` | - | Use `Label` component |
| `valueLabel` | `valueLabel` | Same |
| `showValueLabel` | - | Include or omit `ProgressBar.Output` |
| `radius` | - | Removed (use Tailwind CSS) |
| `isStriped` | - | Removed (use Tailwind CSS on `ProgressBar.Fill`) |
| `isDisabled` | - | Removed |
| `disableAnimation` | - | Removed |
| `classNames` | - | Use `className` on individual compound components |

## Migration Examples

### Basic Progress


  

#### v2


    ```tsx
    import { Progress } from "@heroui/react";

    <Progress label="Loading..." value={60} color="primary" />
    ```
  
  

#### v3


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

    <ProgressBar value={60} color="accent">
      <Label>Loading...</Label>
      <ProgressBar.Output />
      <ProgressBar.Track>
        <ProgressBar.Fill />
      </ProgressBar.Track>
    </ProgressBar>
    ```
  


### Indeterminate


  

#### v2


    ```tsx
    <Progress isIndeterminate aria-label="Loading..." size="sm" />
    ```
  
  

#### v3


    ```tsx
    <ProgressBar isIndeterminate aria-label="Loading..." size="sm">
      <ProgressBar.Track>
        <ProgressBar.Fill />
      </ProgressBar.Track>
    </ProgressBar>
    ```
  


### Without Label (Accessibility)


  

#### v2


    ```tsx
    <Progress aria-label="Loading..." value={70} />
    ```
  
  

#### v3


    ```tsx
    <ProgressBar aria-label="Loading..." value={70}>
      <ProgressBar.Track>
        <ProgressBar.Fill />
      </ProgressBar.Track>
    </ProgressBar>
    ```
  


### Custom Formatting


  

#### v2


    ```tsx
    <Progress
      label="Budget"
      formatOptions={{ style: "currency", currency: "USD" }}
      maxValue={10000}
      value={4000}
    />
    ```
  
  

#### v3


    ```tsx
    <ProgressBar
      formatOptions={{ style: "currency", currency: "USD" }}
      maxValue={10000}
      value={4000}
    >
      <Label>Budget</Label>
      <ProgressBar.Output />
      <ProgressBar.Track>
        <ProgressBar.Fill />
      </ProgressBar.Track>
    </ProgressBar>
    ```
  


## Styling Changes

### v2: `classNames` Prop

```tsx
<Progress
  classNames={{
    base: "custom-base",
    track: "custom-track",
    indicator: "custom-fill",
    label: "custom-label",
    value: "custom-value",
  }}
/>
```

### v3: Direct `className` Props

```tsx
<ProgressBar className="custom-base" value={60}>
  <Label className="custom-label">Loading</Label>
  <ProgressBar.Output className="custom-value" />
  <ProgressBar.Track className="custom-track">
    <ProgressBar.Fill className="custom-fill" />
  </ProgressBar.Track>
</ProgressBar>
```

## Component Anatomy

```
ProgressBar (Root)
  ├── Label (optional)
  ├── ProgressBar.Output (optional, formatted value display)
  └── ProgressBar.Track
      └── ProgressBar.Fill
```

## Summary

1. **Renamed**: `Progress` → `ProgressBar`
2. **Component Structure**: Single component → compound components (`ProgressBar.Output`, `ProgressBar.Track`, `ProgressBar.Fill`)
3. **Label**: `label` prop → `Label` component
4. **Value Display**: `showValueLabel` prop → include or omit `ProgressBar.Output`
5. **Color Changes**: `primary` → `accent`, `secondary` removed
6. **Removed Props**: `radius`, `isStriped`, `isDisabled`, `disableAnimation` → use Tailwind CSS
7. **ClassNames Removed**: Use `className` on individual compound components

---

Index of all JGuang resources: https://jiguang132.com/llms.txt