# File upload list with progress & status.

> File upload list with progress & status.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-progress-5).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-progress-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-progress-5-light-26ccf7bab532c8c6.png
- Registry item: https://reui.io/r/new-york-v4/c-progress-5.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-progress-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `item`, `progress`

## Files

### `c-progress-5.tsx`

```tsx
"use client"

import {
  Item,
  ItemActions,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
import { Progress } from "@/components/ui/progress"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

const files = [
  { id: "1", name: "document.pdf", progress: 45, status: "2m 30s" },
  { id: "2", name: "presentation.pptx", progress: 78, status: "45s" },
  { id: "3", name: "spreadsheet.xlsx", progress: 12, status: "5m 12s" },
  { id: "4", name: "image.jpg", progress: 100, status: "Complete" },
]

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-xs flex-col">
      <ItemGroup>
        {files.map((file) => (
          <Item key={file.id} size="xs" className="px-0">
            <ItemMedia variant="icon">
              <IconPlaceholder
                lucide="FileIcon"
                tabler="IconFile"
                hugeicons="FileEmpty02Icon"
                phosphor="FileIcon"
                remixicon="RiFileLine"
                className="text-muted-foreground size-4"
              />
            </ItemMedia>
            <ItemContent className="flex-1 truncate">
              <ItemTitle className="cursor-pointer truncate hover:underline">
                {file.name}
              </ItemTitle>
            </ItemContent>
            <ItemContent className="w-32">
              <Progress
                value={file.progress}
                className="**:data-[slot=progress-track]:h-1"
              />
            </ItemContent>
            <ItemActions className="w-20 justify-end">
              <span className="text-foreground">{file.status}</span>
            </ItemActions>
          </Item>
        ))}
      </ItemGroup>
    </div>
  )
}
```