NewNow in the official shadcn registry directory

File uploads, built for shadcn.

Upload components that look like the rest of your app, with a tested engine underneath: queues, retries, resumable transfers, any storage. Copy the UI and own the code.

Get startedBrowse components

Next.js · TanStack Start · Vite · React Router. Radix, Base UI or React Aria, in all 8 shadcn styles.

Folder upload

Drop files into the folder

or click to browse

Upload island

Drop or click to upload

Avatar & buttons

JPG, PNG or WebP. Cropped to a square.

Morphs into its own progress bar

Animated queue

Drop files to upload

Remove a row to see it collapse

    Upload terminal

    ~/deploy/assets

    $ uploadcn push --watch

      drop files here, or click to browse

      AI chat attachments

        Progress ring

        Add files

        Drop files on the ring, or click it

        Composable queue

        Drop files here

        or click to browse

          Upload dock

          Attachment chips

            Polaroid photos

            Drop your photos

            Up to 8 images

            Upload stack

            Uploads

            Drop files here. Hover the stack to expand it.

            The whole lifecycle

            A dropzone is easy. Everything behind it isn't.

            UploadCN handles the hard parts so your upload UI survives real networks, large files and impatient users.

            How it works
            1. 01

              Validate

              Types, sizes, counts, duplicates, image dimensions, durations, and your own async rules.

            2. 02

              Transform

              Crop, rotate, resize and compress in the browser. EXIF orientation handled.

            3. 03

              Queue

              Concurrency limits, batches, priorities and per-file progress, speed and ETA.

            4. 04

              Upload

              Direct to S3 or R2 with presigned URLs. Bytes never touch your server.

            5. 05

              Pause & resume

              Parallel multipart parts that resume after a pause, a dropped connection or a reload.

            6. 06

              Retry

              Exponential backoff with jitter and Retry-After. Permanent errors fail fast.

            7. 07

              Go offline

              Uploads wait for the network and continue, without burning retries.

            8. 08

              Scan & process

              Scan files with ClamAV or VirusTotal in your route and read text with any OCR engine. Nothing is faked in the browser.

            Composable

            Compose it like any shadcn component.

            Small parts with sensible defaults. Swap any of them, restyle every class, or drop down to the headless primitives.

            components/attachments.tsx
            <Upload adapter={s3Adapter({ endpoint: "/api/upload" })}>
  <UploadDropzone>
    <UploadDropzoneHeader>
      <UploadDropzoneMedia variant="icon" />
      <UploadDropzoneTitle>Drop files here</UploadDropzoneTitle>
      <UploadDropzoneDescription>or click to browse</UploadDropzoneDescription>
    </UploadDropzoneHeader>
  </UploadDropzone>
  <UploadList>
    <UploadItem>
      <UploadItemMedia />
      <UploadItemContent>
        <UploadItemTitle />
        <UploadItemDescription />
      </UploadItemContent>
      <UploadItemActions />
      <UploadItemProgress />
    </UploadItem>
  </UploadList>
</Upload>

            Components

            Ready-made upload experiences.

            From a single button to AI ingestion pipelines, each one a file in your project.

            All 90 examples

            Any storage

            S3, R2, Cloudinary, local disk, Supabase, tus or your own endpoint. An adapter is a single function.

            Secure by default

            Signed URLs lock size and type, uploads are verified and scanned before they complete, and keys never come from the client.

            Accessible & tested

            Keyboard-first dropzones, real progressbars, live announcements, and 100+ tests on the engine.

            FAQ

            Questions, answered.

            Anything else? Ask on GitHub.

            What is UploadCN?

            UploadCN is an open-source file upload kit for shadcn/ui. It ships upload components and blocks through a shadcn registry, so the UI is copied into your project, plus three small npm packages (@uploadcn/core, @uploadcn/react and @uploadcn/server) for the upload engine, React hooks and server routes.

            How do I add a file upload component to a shadcn project?

            Run npx shadcn@latest add @uploadcn/file-upload in a project set up with shadcn/ui. The CLI copies the component into components/ and installs its dependencies. Every block has its own install command on its docs page and on the examples page.

            Is there a drag and drop file upload component for shadcn/ui?

            Yes. UploadCN's File Upload is a shadcn/ui dropzone with drag and drop and click to browse, plus a file list with previews, progress, retry and remove. Install it with npx shadcn@latest add @uploadcn/file-upload, or pick one of 58 blocks such as image, avatar, gallery, document and video uploads.

            Does UploadCN work with Next.js, Vite and TanStack Start?

            Yes. The components are plain React, so they work in any React app set up with the shadcn CLI: Next.js (App Router), Vite, React Router, TanStack Start and Astro. The upload route ships for Next.js and TanStack Start, and the adapters work with any backend.

            Which storage does UploadCN work with?

            Any storage. Amazon S3, Cloudflare R2, MinIO, Backblaze B2 and other S3-compatible buckets use presigned URLs, so files go straight from the browser to the bucket. Cloudinary, local disk, tus servers, your own endpoint or any SDK (Supabase, Firebase, Vercel Blob) work through adapters, and localAdapter keeps files in the browser for forms.

            Does it support large, resumable and chunked uploads?

            Yes. Large files upload in parallel multipart chunks that resume after a pause, a dropped connection or a page reload. Retries use exponential backoff, and uploads wait for the network to come back when the user goes offline.

            Does UploadCN work with every shadcn style and icon library?

            Yes. Components follow all eight shadcn styles (Vega, Nova, Maia, Lyra, Mira, Luma, Sera and Rhea), the Radix, Base UI and React Aria bases, every theme, and the Lucide, Tabler, Hugeicons, Phosphor and Remix Icon libraries.

            Can uploads be scanned for viruses?

            Yes, on your server. The upload route can scan every file with ClamAV, VirusTotal or your own scanner before the upload completes. Infected files are deleted and shown to the user as rejected.

            Can UploadCN read text from images and PDFs (OCR)?

            Yes. OCR works with Google Cloud Vision, AWS Textract, Azure Document Intelligence, Mistral OCR or your own service through a server route, or with Tesseract directly in the browser. The OCR Upload and Receipt Upload blocks use it.

            Is UploadCN free?

            Yes. UploadCN is open source under the MIT license. You own the component code you install, and the npm packages are free to use in commercial projects.

            Ship uploads your users won't notice.

            Add the upload route, drop in a component, and point it at your bucket. That's it.

            Install UploadCN