Radix UI file upload blocks.

The 100 file upload blocks are sections built around sending files: drop zones, queues with progress, image previews, viewers, importers and file managers. They are UI and state only: a picked file is listed by name and size, and nothing is uploaded or read in the demo.

There are 14 groups: Drop zones, Transfers and queues, Pictures in slots, Image tools, Media and creative files, Conversion and batch work, and more. They go from a plain drop zone to chunked transfers, image tools, CSV imports, scanned-document intake and sharing panels with signed URLs.

Folding Dropzone File Upload is the general one: it folds into a strip with a list and a size total once files arrive. Bulk File Upload and Chunked File Upload show many files or one large file moving through states. Avatar File Upload and Image Preview File Upload are for pictures. CSV Import File Upload parses text to preview rows and flag bad ones.

A doc comment describes the behaviour, then typed constants set the limits, the sample files and the copy, and the component follows. Most blocks are built on the shared File Upload component, which provides the drop area, the trigger and the accept, size and count rules.

The blocks hand you the picked files in an accept callback and then stop. Where a comment says to hand the file to your storage, call your upload there: a presigned URL, your API route or a server action. Update the row's state from the response so the progress and Done states follow.

Set them on the File Upload component the block renders: accept for types, maxFileSize in bytes and maxFiles for the count, then handle onFileReject to say why a file was refused. Folding Dropzone File Upload sets a 25 MB folder total and a 50 file cap this way and shows its own sentence per refusal.

The progress, uploading and failed states in Bulk File Upload and Chunked File Upload are typed in the file and shown as bars and labels. Keep the rendering and feed it real numbers: with XMLHttpRequest the upload.onprogress event gives loaded and total, while fetch alone does not report upload progress.

Error Handling File Upload lists five kinds of failure, a dropped connection, a timeout, a server error, an oversize file and an unsupported type, each with the one action that fits: retry, contact support, choose another file or convert. Map your own error codes to those rows and keep the Undo and Retry all controls.

The blocks show only the name and size and never open the file. For a preview, create an object URL from the File with URL.createObjectURL and revoke it when the row goes. For a check on dimensions, Logo File Input Form shows the pattern with createImageBitmap, and Image Preview File Upload draws a picture per file name.

This page lists 100 of the category's 100 file upload blocks for React on Radix UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The file upload blocks here are written on Radix UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/radix/file-upload-3d-model.json). The other bases are one picker away from /file-upload-block/radix.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Radix UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/radix/file-upload-3d-model.json for Model Viewport 3D File Upload. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Model Viewport 3D File Upload brings Button, Data List, File Upload, Guides, Native Select, Segment Group, Shine Button and Toggle Group, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of file upload block, led by scanning and regulated intake (8), sharing and developer panels (8), drop zones (7) and transfers and queues (7), and sort by popular or name. A good first look: Model Viewport 3D File Upload, Access Control File Upload and Activity Log File Upload. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a file upload block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the upload zones and queues, images and media and files and data kinds.

Open its page and use the full-screen viewer (/view/file-upload/radix/3d-model) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each file upload block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Radix UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the file upload blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 file upload blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a file upload block, read it with get_block and install it on your React on Radix UI stack.

Pass `category: "file-upload"` to search_blocks to search only the 100 file upload blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "file-upload", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.