10 Blocks

shadcn/ui file upload blocks & components.

File upload blocks for shadcn/ui: drag-and-drop dropzones with per-file progress and error states, inline form fields, image gallery uploaders with cover badges and drag-to-reorder, avatar croppers, a cloud-drive file manager, and a CSV import preview with validation chips. Upload flows with the states real users hit.

Dropzone With Upload Progress

File Upload 1Free

File upload card with a drag-and-drop dropzone and an attachment list showing a spinner per file while uploading and a check when finished.

AttachmentButtonCardSpinner

Inline File Field

File Upload 2Free

Compact inline file upload form field with a bordered Choose File row and one attachment showing the selected file name, size, and remove action.

AttachmentField

Uploader With Validation Toasts

File Upload 3Free

Drag-and-drop file uploader enforcing size and type validation, with uploading, done, and error attachment states, toasts, and per-file remove.

AttachmentButtonCardSonnerSpinner

Image Gallery Uploader

File Upload 4Free

Image gallery uploader with a responsive thumbnail grid, a cover badge on the first photo, hover remove buttons, an upload tile, and an image count.

BadgeButtonCard

Avatar Photo Uploader

File Upload 5Free

Avatar uploader with a circular image preview, change and remove buttons, and a format hint, previewing the picked file via an object URL.

Button

Upload Queue With Progress Rings

File Upload 6Pro

Animated upload queue where each file row shows a circular progress ring, speed and ETA, pause, cancel, and retry, above an aggregate progress bar.

AttachmentButtonEmptyProgress

Drag-To-Reorder Gallery

File Upload 7Pro

Image gallery whose grayscale thumbnails drag or arrow-key to reorder, with a cover badge following the first slot, and hover set-cover and remove.

BadgeButton
@dnd-kit/core@dnd-kit/sortable@dnd-kit/utilities

File Transfer Share Composer

File Upload 8Pro

Two-column file transfer composer pairing a share panel (count-up total size, expiry select, copy link button) with a reflowing transfer contents list.

AttachmentButtonEmptySelect

Cloud Drive File Manager

File Upload 9Pro

Cloud drive file manager with a breadcrumb, count-up storage meter, scroll-faded file and folder list with owner avatars, and a drag-anywhere upload overlay.

AvatarBreadcrumbButtonProgress

CSV Import Preview Table

File Upload 10Pro

CSV import preview with a data table of detected columns, count-up row and column stats, validation chips, and skipped or rejected rows tinted in place.

ButtonTable