@uploadcn
Production-ready file uploads: dropzones, queues, resumable S3 and R2 uploads, and 58 blocks for every style.
Install this registry
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 curl -s https://uploadcn.dev/r/registry.json Components
66 totalComposable, accessible upload primitives: dropzone, trigger, queue, previews, progress, status and actions.
npx shadcn@latest add https://uploadcn.dev/r/{style}/upload.json 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 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 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 A dropzone with a full upload queue, progress summary and batch actions.
npx shadcn@latest add https://uploadcn.dev/r/{style}/file-upload.json A single button that uploads and reports progress inline.
npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-button.json An image grid with optional cropping and client-side compression.
npx shadcn@latest add https://uploadcn.dev/r/{style}/image-upload.json A profile photo uploader with round cropping and a progress ring.
npx shadcn@latest add https://uploadcn.dev/r/{style}/avatar-upload.json A photo gallery uploader that resizes images to WebP before upload.
npx shadcn@latest add https://uploadcn.dev/r/{style}/gallery-upload.json 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 uploads with an inline player per file.
npx shadcn@latest add https://uploadcn.dev/r/{style}/audio-upload.json Document, PDF and résumé uploads with type badges.
npx shadcn@latest add https://uploadcn.dev/r/{style}/document-upload.json An AI chat composer with attachments via click, drag and paste.
npx shadcn@latest add https://uploadcn.dev/r/{style}/chat-attachments.json RAG / knowledge-base ingestion with parse, chunk, embed and index stages.
npx shadcn@latest add https://uploadcn.dev/r/{style}/document-ingest.json 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 A form field for react-hook-form, TanStack Form and server actions.
npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-field.json 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 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 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 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 A settings card for a workspace logo with light and dark previews.
npx shadcn@latest add https://uploadcn.dev/r/{style}/logo-upload.json Images upload in the background while people write alt text and captions.
npx shadcn@latest add https://uploadcn.dev/r/{style}/image-metadata.json Attachments behind a toolbar button with a count and a progress ring.
npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-popover.json 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 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 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 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 Resume, cover letter and portfolio for a careers page.
npx shadcn@latest add https://uploadcn.dev/r/{style}/job-application-upload.json 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 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 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 Coursework hand-in with a deadline, late flag, and turn in / unsubmit.
npx shadcn@latest add https://uploadcn.dev/r/{style}/assignment-submission.json 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 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 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 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 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 Uploads stacked like notifications that fan out on hover or focus.
npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-stack.json 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 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 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 A dropzone whose rings ripple while dragging, with a burst on drop.
npx shadcn@latest add https://uploadcn.dev/r/{style}/ripple-dropzone.json 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 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 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 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 A macOS-style dock of uploaded files that magnifies under the cursor.
npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-dock.json 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 A dropzone whose target leans towards the pointer and follows dragged files.
npx shadcn@latest add https://uploadcn.dev/r/{style}/magnetic-dropzone.json 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 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 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 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 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 Files, megabytes and percent on rolling odometer digits.
npx shadcn@latest add https://uploadcn.dev/r/{style}/upload-odometer.json Particles rise into a cloud that fills with the upload progress.
npx shadcn@latest add https://uploadcn.dev/r/{style}/cloud-dropzone.json A single-file card that flips to show the uploaded file.
npx shadcn@latest add https://uploadcn.dev/r/{style}/flip-card-upload.json 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 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 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 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 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 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 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 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 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