---
name: "@uploadcn"
slug: "uploadcn"
description: "Production-ready file uploads: dropzones, queues, resumable S3 and R2 uploads, and 58 blocks for every style."
category: "Animated components"
tags: ["animation", "audio", "auth", "blocks", "buttons", "cards", "e-commerce", "glassmorphism", "hooks", "icons", "loaders", "media", "navigation", "overlays", "retro", "tables", "text-effects"]
framework: "react"
license: "MIT"
author: "uploadcn"
website: "https://uploadcn.dev"
github: "https://github.com/uploadcn/uploadcn"
registry: "https://uploadcn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 66
generated_at: "2026-10-13T06:38:00.276Z"
---

# @uploadcn

Production-ready file uploads: dropzones, queues, resumable S3 and R2 uploads, and 58 blocks for every style.

## Links

- Website: https://uploadcn.dev
- GitHub: https://github.com/uploadcn/uploadcn
- Registry JSON: https://uploadcn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/uploadcn
- This file: https://sh4dcn.vercel.app/md/uploadcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://uploadcn.dev/r/registry.json
pnpm dlx shadcn@latest add https://uploadcn.dev/r/registry.json
bunx shadcn@latest add https://uploadcn.dev/r/registry.json
# clone the source repo
git clone https://github.com/uploadcn/uploadcn.git
# fetch the raw registry index
curl -s https://uploadcn.dev/r/registry.json
```

## Components (66)

| name | type | description | install |
| --- | --- | --- | --- |
| upload | registry:ui | Composable, accessible upload primitives: dropzone, trigger, queue, previews, progress, status and actions. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload.json` |
| image-cropper | registry:ui | A crop, zoom, rotate and flip dialog that outputs a processed image file. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/image-cropper.json` |
| use-crop-queue | registry:hook | Turns a crop dialog into an async step so images can be cropped before they upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/use-crop-queue.json` |
| use-camera | registry:hook | Streams the device camera into a video element and captures frames as Files. Starts only on demand. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/use-camera.json` |
| file-upload | registry:block | A dropzone with a full upload queue, progress summary and batch actions. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/file-upload.json` |
| upload-button | registry:block | A single button that uploads and reports progress inline. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-button.json` |
| image-upload | registry:block | An image grid with optional cropping and client-side compression. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/image-upload.json` |
| avatar-upload | registry:block | A profile photo uploader with round cropping and a progress ring. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/avatar-upload.json` |
| gallery-upload | registry:block | A photo gallery uploader that resizes images to WebP before upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/gallery-upload.json` |
| video-upload | registry:block | Video uploads with inline playback, duration limits and resumable multipart for large files. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/video-upload.json` |
| audio-upload | registry:block | Audio uploads with an inline player per file. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/audio-upload.json` |
| document-upload | registry:block | Document, PDF and résumé uploads with type badges. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/document-upload.json` |
| chat-attachments | registry:block | An AI chat composer with attachments via click, drag and paste. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/chat-attachments.json` |
| document-ingest | registry:block | RAG / knowledge-base ingestion with parse, chunk, embed and index stages. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/document-ingest.json` |
| global-upload | registry:block | An app-wide upload provider with a drop-anywhere overlay, a background queue panel and IndexedDB persistence. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/global-upload.json` |
| upload-field | registry:block | A form field for react-hook-form, TanStack Form and server actions. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-field.json` |
| upload-dialog | registry:block | Pick files, review them, then upload in a modal that confirms before closing mid-upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-dialog.json` |
| upload-table | registry:block | The upload queue as a data table, with a drop overlay over the whole table. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-table.json` |
| upload-tabs | registry:block | One queue fed from three sources: the device, a public link or the camera. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-tabs.json` |
| camera-upload | registry:block | Take photos with the device camera and upload them as you go, with a file picker fallback. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/camera-upload.json` |
| logo-upload | registry:block | A settings card for a workspace logo with light and dark previews. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/logo-upload.json` |
| image-metadata | registry:block | Images upload in the background while people write alt text and captions. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/image-metadata.json` |
| upload-popover | registry:block | Attachments behind a toolbar button with a count and a progress ring. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-popover.json` |
| product-media-upload | registry:block | Storefront product photos: a cover image and a gallery you reorder by drag or keyboard. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/product-media-upload.json` |
| csv-import | registry:block | Bulk import from a spreadsheet, with column checks and a preview before upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/csv-import.json` |
| identity-verification | registry:block | KYC-style ID front, back and selfie with a progress rail and submit gate. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/identity-verification.json` |
| document-checklist | registry:block | A checklist of required documents (claims, onboarding, visas) ticked off as they upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/document-checklist.json` |
| job-application-upload | registry:block | Resume, cover letter and portfolio for a careers page. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/job-application-upload.json` |
| ocr-upload | registry:block | Upload scans, photos and PDFs and read their text with any OCR engine, with copy, download and extracted fields. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/ocr-upload.json` |
| receipt-upload | registry:block | Expense capture: a receipt plus details your OCR can prefill (merchant, date, amount). | `npx shadcn@latest add https://uploadcn.dev/r/{style}/receipt-upload.json` |
| property-photos | registry:block | Real-estate listing photos tagged by room, with coverage and a recommended count. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/property-photos.json` |
| assignment-submission | registry:block | Coursework hand-in with a deadline, late flag, and turn in / unsubmit. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/assignment-submission.json` |
| upload-config | registry:file | Configure storage once: an UploadConfigProvider wrapper for your root layout that every UploadCN component uses. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-config.json` |
| upload-route | registry:file | A Next.js route handler that signs S3 or R2 uploads at /api/upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-route.json` |
| ocr-route | registry:file | A Next.js route handler at /api/ocr that reads text with Google Vision, Textract, Azure, Mistral or your own service. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/ocr-route.json` |
| upload-route-tanstack | registry:file | A TanStack Start server route that signs S3 uploads at /api/upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-route-tanstack.json` |
| folder-upload | registry:block | A folder that opens on hover and drag; dropped files fly in and the front shows progress. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/folder-upload.json` |
| upload-stack | registry:block | Uploads stacked like notifications that fan out on hover or focus. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-stack.json` |
| upload-morph-button | registry:block | A button that morphs into its own progress bar, then a check mark. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-morph-button.json` |
| polaroid-upload | registry:block | Photos drop onto the table like polaroids with a spring and a tilt. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/polaroid-upload.json` |
| animated-upload-queue | registry:block | A queue whose rows expand in, collapse out, count up and draw a check. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/animated-upload-queue.json` |
| ripple-dropzone | registry:block | A dropzone whose rings ripple while dragging, with a burst on drop. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/ripple-dropzone.json` |
| upload-island | registry:block | A Dynamic Island-style pill that morphs between idle, progress and done, and expands into the file list on hover. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-island.json` |
| image-reveal-upload | registry:block | A single-image uploader where the photo develops behind a scan line as it uploads. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/image-reveal-upload.json` |
| liquid-dropzone | registry:block | A dropzone that fills up like a glass with the combined upload progress. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/liquid-dropzone.json` |
| progress-ring-upload | registry:block | One ring for the whole batch: a counting percentage, per-file ticks and a self-drawing check. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/progress-ring-upload.json` |
| upload-dock | registry:block | A macOS-style dock of uploaded files that magnifies under the cursor. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-dock.json` |
| upload-terminal | registry:block | Uploads printed as a CLI log with ASCII progress bars, speed and results. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-terminal.json` |
| magnetic-dropzone | registry:block | A dropzone whose target leans towards the pointer and follows dragged files. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/magnetic-dropzone.json` |
| envelope-upload | registry:block | Files slide into an envelope; the flap closes and a seal stamps on when sent. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/envelope-upload.json` |
| paper-plane-button | registry:block | A send button that fills with progress, then the paper plane takes off. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/paper-plane-button.json` |
| shopping-bag-upload | registry:block | Product photos drop into a shopping bag that fills as they upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/shopping-bag-upload.json` |
| orbit-upload | registry:block | Files orbit the center while uploading and land in a row when done. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/orbit-upload.json` |
| upload-confetti | registry:block | Drop into any Upload: a confetti burst in your theme's colors when a batch finishes. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-confetti.json` |
| upload-odometer | registry:block | Files, megabytes and percent on rolling odometer digits. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-odometer.json` |
| cloud-dropzone | registry:block | Particles rise into a cloud that fills with the upload progress. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/cloud-dropzone.json` |
| flip-card-upload | registry:block | A single-file card that flips to show the uploaded file. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/flip-card-upload.json` |
| scanner-upload | registry:block | A document scanner frame with corner guides and a scan beam, for IDs and receipts. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/scanner-upload.json` |
| vinyl-upload | registry:block | A record that spins while tracks upload, with a tonearm that follows progress. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/vinyl-upload.json` |
| rocket-upload | registry:block | A rocket that climbs with the upload and lifts off when it's done. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/rocket-upload.json` |
| battery-upload | registry:block | Charges cell by cell for backups, with a bolt that pulses while it charges. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/battery-upload.json` |
| typewriter-upload | registry:block | Types each file name onto a page that rolls out of the machine. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/typewriter-upload.json` |
| hourglass-upload | registry:block | Sand runs through an hourglass as files upload, with the time left up front. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/hourglass-upload.json` |
| blueprint-upload | registry:block | A drawing traces itself as CAD files upload, then the title block is approved. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/blueprint-upload.json` |
| stamp-upload | registry:block | Documents land on a pile and get stamped the moment they're received. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/stamp-upload.json` |
| delivery-upload | registry:block | A truck carries files from the warehouse to their destination as they upload. | `npx shadcn@latest add https://uploadcn.dev/r/{style}/delivery-upload.json` |

## For AI agents

```text
You are adding components from @uploadcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/uploadcn.md) for the component list.
2. Fetch the machine-readable index: https://uploadcn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: uploadcn).
```