Dropzone

A place to drop or choose files that checks them first, says how to fix the wrong ones and shows each upload's progress.

Forms

Inspect

Installation#

Terminal

npx shadcn@latest add @sphere-kit/dropzone

dropzone.tsx

import {  Dropzone,  DropzoneProps,  DropzoneFile,  DropzoneRejection,} from "@/components/ui/dropzone"

Idle

Drag over

Rejected

Disabled

spring-sleep-reset-paywall-hero-annual-plan-first-variant-b-final-final-v7.png18% of 3.2 MB
onboarding_email_3_trial_reminder_header_image_dark_mode_2x.jpgThe image is 9000 px wide. Export it at 4000 px or less and add it again.

12 files, 3 uploading, 1 didn't upload

Exports Dropzone formatBytes DropzoneProps DropzoneFile DropzoneRejection. Every part takes its element's usual props and a className.