Examples

90 live components and patterns. Open one to see its code, props and variants.

  • Vinyl record

    Music uploads on a spinning record.

  • Rocket launch

    Ship build artifacts with a liftoff.

  • Battery backup

    Photo backups that charge a battery.

  • Typewriter

    Document submissions typed onto a page.

  • Hourglass

    Long uploads with the time left up front.

  • Blueprint

    CAD and drawings traced as they upload.

  • Rubber stamp

    Contracts stamped as they're received.

  • Delivery truck

    Shipping documents on a delivery route.

  • Folder upload

    The folder opens on hover; dropped files fly in.

  • Upload island

    A pill that morphs between idle, progress and done.

  • Envelope

    Files slide into an envelope that seals when sent.

  • Paper plane button

    Fills while sending, then the plane takes off.

  • Shopping bag

    Product photos drop into a bag that fills up.

  • Orbit

    Files orbit the center, then land in a row.

  • Upload stack

    Stacked cards that fan out on hover.

  • Morphing button

    Button → progress → check, in one element.

  • Polaroid photos

    Photos drop in with a spring and a tilt.

  • Image reveal

    The photo develops behind a scan line as it uploads.

  • Liquid dropzone

    Fills up like a glass with the batch progress.

  • Progress ring

    One ring, a counting percentage, a drawn check.

  • Upload dock

    A dock of files that magnifies under the cursor.

  • Upload terminal

    Uploads printed as a CLI log with ASCII bars.

  • Magnetic dropzone

    The target leans towards the pointer and dragged files.

  • Ripple dropzone

    Rings ripple while dragging; a burst on drop.

  • Cloud dropzone

    Particles rise into a cloud that fills with progress.

  • Flip card

    The card flips to show the file once it's uploaded.

  • Document scanner

    Corner guides and a scan beam for IDs and receipts.

  • Odometer

    Files, megabytes and percent on rolling digits.

  • Confetti

    A burst in your theme's colors when a batch finishes.

  • Animated queue

    Rows expand in, collapse out and draw a check.

  • Product media

    Cover image and a reorderable gallery for a storefront.

  • CSV import

    Check columns and preview rows before a bulk import.

  • Identity verification

    ID front, back and selfie with a progress rail.

  • Document checklist

    Required documents for a claim, ticked off as they upload.

  • Job application

    Resume, cover letter and portfolio for a careers page.

  • OCR upload

    Read text from scans, photos and PDFs after upload.

  • Receipt capture

    Snap a receipt; your OCR fills in the expense.

  • Property photos

    Tag listing photos by room and see what's missing.

  • Assignment hand-in

    Turn in coursework before the deadline.

  • Upload dialog

    Pick, review, then upload, in a modal.

  • Attachments popover

    Attachments behind a button with a progress ring.

  • Upload table

    The queue as a data table with a drop overlay.

  • Device, link or camera

    Three sources, one queue.

  • Camera capture

    Take photos and upload them as you go.

  • Logo settings card

    Preview a logo on light and dark backgrounds.

  • Alt text & captions

    Describe images while they upload.

  • Chat attachments

    ChatGPT-style composer with paste and drop.

  • AI document ingestion

    Upload, parse, chunk, embed, index.

  • Full-window dropzone

    Drop files anywhere on the page.

  • Upload button

    A single button with inline progress.

  • Batch upload

    Review a selection, then upload it as a batch.

  • Gallery

    Photos resized to WebP, uploaded four at a time.

  • Avatar upload

    Round crop and a progress ring.

  • Image upload

    Image grid with in-browser compression.

  • Video

    Inline playback, duration limits, resumable for large files.

  • Audio

    Audio files with an inline player.

  • Documents & résumé

    Office documents, plus a single-file résumé field.

  • PDF

    PDF-only uploads with type badges.

  • Composition

    Dropzone, list and item parts, composed.

  • Header, summary, footer

    UploadHeader, UploadSummary and UploadFooter in a card.

  • Named slots

    One upload, a slot per required document.

  • Drop overlay

    Make any content a drop target with UploadOverlay.

  • Dropzone variants

    default, muted and outline.

  • Horizontal dropzone

    orientation="horizontal" with a trigger.

  • Item variants

    outline, muted and default items.

  • Item sizes

    default, sm and xs.

  • Grid of tiles

    variant="grid" lists with tile items.

  • Attachment chips

    Inline, rounded, extra-small items.

  • Triggers

    Any element can open the picker.

  • Upload queue

    Concurrency-limited queue with aggregate progress.

  • Custom UI

    Headless primitives with a completely custom design.

  • UI only, no storage

    Files stay in the browser; the form submits them.

  • Custom adapter

    Turn any upload function into an adapter.

  • S3 presigned

    Direct-to-bucket uploads signed by your route.

  • R2 presigned

    Cloudflare R2 through its S3-compatible API.

  • Chunked upload

    Parallel parts with per-part retry via multipartAdapter.

  • Resumable upload

    Survives reloads with IndexedDB persistence.

  • Basic upload

    A dropzone with a queue, in one line.

  • Drag and drop

    Drop files or whole folders; browse as a fallback.

  • Multiple files

    Up to 10 files with per-file progress.

  • File restrictions

    Type, size, count, dimensions, duplicates and custom rules.

  • Required upload

    Native form with hidden inputs and a required rule.

  • Form upload

    react-hook-form + zod; submit waits for uploads.

  • Image crop

    Crop, zoom, rotate and flip before uploading.

  • Image compression

    Resize and re-encode with live savings.

  • Retry

    Automatic exponential backoff, then manual retry.

  • Pause and resume

    Resume from the last byte with a resumable adapter.

  • Background uploads

    App-level queue that persists across reloads.

  • Error states

    Network, 403, 413, blocked and retryable failures.

  • Scan states

    Processing and malware-scan verdicts from the backend.