# Progress: Long labels

> Long names wrap onto their own lines and the value stays on the end. Rings work as compact status beside each row.

Example: https://hextaui.com/docs/progress/examples/files
Component docs: https://hextaui.com/docs/progress.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/progress-files.json
```

This adds `components/examples/progress/files.tsx` with the Progress component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/progress/files.tsx"
import {
  Progress,
  ProgressCircle,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

const files = [
  {
    name: "quarterly-report-final-v3-approved-by-legal-and-finance.pdf",
    value: 64,
  },
  { name: "IMG_20260914_183022_HDR_edited_export.jpg", value: 100 },
  { name: "brand-assets.zip", value: 12 },
]

export function ProgressFiles() {
  return (
    <ul className="flex w-full max-w-sm flex-col gap-5">
      {files.map((file) => (
        <li key={file.name} className="flex items-start gap-3">
          <ProgressCircle value={file.value} aria-label={file.name} />
          <div className="min-w-0 flex-1">
            <Progress value={file.value} size="sm">
              <ProgressLabel>{file.name}</ProgressLabel>
              <ProgressValue />
            </Progress>
          </div>
        </li>
      ))}
    </ul>
  )
}
```

## Props in this example

### Progress

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – | null makes the bar indeterminate. |
| `size` | `"xs" \| "sm" \| "default" \| "lg"` | `"default"` |  |

### ProgressCircle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – | null spins an arc. |

## More Progress examples

- [Sizes](https://hextaui.com/docs/progress/examples/sizes.md)
- [Status](https://hextaui.com/docs/progress/examples/variants.md)
- [Segments](https://hextaui.com/docs/progress/examples/segments.md)
- [Indeterminate](https://hextaui.com/docs/progress/examples/indeterminate.md)
- [Circle](https://hextaui.com/docs/progress/examples/circle.md)
- [Indeterminate circle](https://hextaui.com/docs/progress/examples/circle-indeterminate.md)
- [Custom range and format](https://hextaui.com/docs/progress/examples/format.md)
- [Animated value](https://hextaui.com/docs/progress/examples/number-flow.md)
- [Without a visible label](https://hextaui.com/docs/progress/examples/unlabeled.md)
- [Right to left](https://hextaui.com/docs/progress/examples/rtl.md)