Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Upload Queue Preview Gallery Block for Radix UI

A file drop zone that lists every file you pick or drop (name and size, never opened) beside a queue of four seeded files in their states, with Retry, Remove and a Send button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An upload queue for React with Radix UI, for Dropbay, a file-drop service. A split puts a header and the catalog file-upload drop zone (framed, with + marks) at the start and, past the divider, a queue in a region that keeps one height. The queue starts with four files in four states: uploaded, uploading with a progress bar, uploaded, and failed with a Retry button. Files you pick or drop join as "Queued", each with its name, its real size and a drawn stand-in thumbnail chosen from its name: the block never opens or reads a file. Remove takes one out, Retry puts the failed one back in the queue, and Send marks every queued file as uploaded. A polite line says "3 of 4 uploaded". Nothing is sent or saved in this demo. It's built from File Upload, Progress, Shine Button and Guides.

FAQ

Does it read the files I choose?

No. The drop zone hands the block each accepted file, and the block keeps only its name and its size. The thumbnail is a drawing picked from the file's type and a number made from its name, so the same name always draws the same picture. Nothing is uploaded, previewed from the file or stored.

How are the states told apart?

By words and a mark, never by colour alone: a tick and "Uploaded", a clock and "Queued", an alert mark and "Failed: the connection dropped", and "Uploading, 64%" with a thin bar in the theme's foreground. The bar is hidden from screen readers because the percentage is in the text.

What if a file is too big?

The drop zone refuses a file over 50 MB and the block says so in its status line ("big-video.mov is over 50 MB and was not added"); nothing is queued. Change MAX_BYTES and the hint under the drop zone for your own limit.

Does the queue grow the block?

No. The queue is a scrolling region of fixed height (focusable, so the keyboard can scroll it) and the foot band keeps its height; ten files scroll, four don't.

Is anything saved or sent?

No. Send, Retry and Remove only change the list. It all lives in the block's own state and is gone on reload. Each action says "nothing is saved in this demo" in a polite status line; wire the handlers to your own storage or API when you use it.

How does it fit on a phone?

The queue goes under the drop zone, full width. Each row keeps its thumbnail, name, size and state on two lines, and the Send button sits under its status line.

All 100 gallery blocks