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.