# Progress
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/progress
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/progress.mdx
> Migration guide for Progress from HeroUI v2 to v3 (now ProgressBar)
***
Refer to the [v3 ProgressBar documentation](/docs/react/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](/docs/react/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 (
);
}
```
In v3, `ProgressBar` uses a compound component pattern:
```tsx
import { ProgressBar, Label } from "@heroui/react";
export default function App() {
return (
);
}
```
## 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
```tsx
import { Progress } from "@heroui/react";
```
```tsx
import { ProgressBar, Label } from "@heroui/react";
```
### Indeterminate
```tsx
```
```tsx
```
### Without Label (Accessibility)
```tsx
```
```tsx
```
### Custom Formatting
```tsx
```
```tsx
```
## Styling Changes
### v2: `classNames` Prop
```tsx
```
### v3: Direct `className` Props
```tsx
```
## 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