Uploadcn

Overview

UploadCN is a free, open-source set of shadcn/ui file upload components for React. It pairs upload UI that matches the rest of a shadcn app with a tested engine underneath that handles validation, queues, retries, resumable transfers and direct-to-storage uploads.

The registry holds 66 items, including 58 blocks that range from practical forms (avatar, document, CSV import, receipt and identity verification uploads) to playful variants such as vinyl, rocket and typewriter dropzones. It supports Next.js, TanStack Start, Vite and React Router, works with Radix, Base UI or React Aria primitives, and ships in all 8 shadcn styles.

Features

• Validation: Checks types, sizes, counts, duplicates, image dimensions, durations and custom async rules.
• In-browser transforms: Crop, rotate, resize and compress images, with EXIF orientation handled.
• Queueing: Concurrency limits, batches, priorities and per-file progress, speed and ETA.
• S3 and R2 uploads: Direct uploads with presigned URLs, so bytes never pass through the app server.
• Pause, resume and retry: Parallel multipart parts resume after a pause, dropped connection or reload, with exponential backoff and offline waiting.
• Scan and process: Server routes for ClamAV or VirusTotal scanning and OCR text extraction.
• 58 blocks: Chat attachments, upload dialogs and tables, folder uploads, upload terminal, progress ring and more.
• Composable parts: Small components with defaults, restylable classes and headless primitives underneath.

Tech stack

• React with Next.js, TanStack Start, Vite or React Router
• shadcn/ui with Radix, Base UI or React Aria
• Tailwind CSS

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @uploadcn/component-name