# File List Progress — React File Component

> An upload queue with pause, resume, cancel and retry: two files transfer at a time, queued ones start on their own, and finished rows settle with a drawn check.

- Category: [Files & Uploads](https://pixelpapa.com/components/files.md)
- Tags: upload, queue, progress, pause, file list
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/files/file-list-progress

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/file-list-progress
```

The file is written to `components/pixelpapa/file-list-progress.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/files/file-list-progress.

## AI prompt

```text
Add the "File List Progress" component from PixelPapa UI to this project.

What it is: An upload queue with pause, resume, cancel and retry: two files transfer at a time, queued ones start on their own, and finished rows settle with a drawn check.
Category: Files & Uploads. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/file-list-progress
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/file-list-progress.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/file-list-progress.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/file-list-progress" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More files & uploads

- [File Attachment Chips](https://pixelpapa.com/components/files/file-attachment-chips.md): Attachment chips with a type-coloured icon and size; new chips pop in, removed ones collapse, and the rest reflow with spring layout animation.
- [File Preview Grid](https://pixelpapa.com/components/files/file-preview-grid.md): A grid of file tiles colour-coded by type, each with a drawn preview; tiles lift on hover to reveal actions and a selection count rolls in the header.
- [File Tree Explorer](https://pixelpapa.com/components/files/file-tree-explorer.md) (Pro): A file tree with spring-animated folders, indent guides and full arrow-key navigation; the selection highlight slides between rows.
- [File Upload Dropzone](https://pixelpapa.com/components/files/file-upload-dropzone.md): A dropzone that lifts and glows while files hover over it, then lists each file with its own simulated progress bar, a drawn check on completion and a remove button.