# Dropzone components

> Effortlessly add file upload areas to your React apps with 4 Tailwind CSS dropzone components, ideal for enhancing user interactions.

60 components available. Showing all of them below.

- [Dropzone](https://21st.dev/@haydenbleasel/components/dropzone.md) — by Hayden Bleasel
- [Sketchpad Dropzone](https://21st.dev/@ruixen.ui/components/sketchpad-dropzone.md) — by Ruixen UI
- [Fishy File Drop](https://21st.dev/@maxim.bort.devel/components/fishy-file-drop.md) — by Maxim Bortnikov
- [File Dropzone](https://21st.dev/@joyco/components/file-dropzone.md) — by JOYCO
- [Image Preview Dropzone](https://21st.dev/@uilayout.contact/components/imgpreview-dropzone.md) — by UI Layouts
- [UploadThing Dropzone](https://21st.dev/@elements-/components/uploadthing-dropzone.md) — by Cameron Kelliher
- [useImageUpload](https://21st.dev/@originui/components/use-image-upload.md) — by Origin UI
- [File Upload](https://21st.dev/@manuarora700/components/file-upload.md) — by Manu Arora
- [Upload Input](https://21st.dev/@ruixen.ui/components/ruixen-upload-input.md) — by Ruixen UI
- [File Upload Card](https://21st.dev/@ravikatiyar162/components/file-upload-card.md) — by Ravi Katiyar
- [File Upload](https://21st.dev/@ruixen.ui/components/file-upload.md) — by Ruixen UI
- [Image Uploader](https://21st.dev/@lavikatiyar/components/image-uploader.md) — by Lavi Katiyar
- [File Upload and Chat](https://21st.dev/@avanishverma4/components/file-upload-and-chat.md) — by Awanish Verma
- [File Upload](https://21st.dev/@preetsuthar17/components/file-upload.md) — by Preet Suthar
- [Video Upload Card](https://21st.dev/@isaiahbjork/components/video-upload-card.md) — by Isaiah
- [BeUI File Upload](https://21st.dev/@saurabh10102/components/be-ui-file-upload.md) — by Saurabh Chauhan
- [image uploader](https://21st.dev/@info-mdshakeeb/components/image-uploader.md) — by shakeeb
- [FileUpload](https://21st.dev/@arunjdass/components/file-upload.md) — by Arun Dass
- [Futuristic File Uploader](https://21st.dev/@singla2125ji/components/futuristic-file-uploader/futuristic-file-uploader.md) — by LAKSHAY SINGLA
- [File Upload](https://21st.dev/@ephraimduncan/components/file-upload-1.md) — by Ephraim Duncan
- [Input Modal](https://21st.dev/@arihantcodes_1f7b8c4d/components/input-modal.md) — by Arihant jain
- [File Upload](https://21st.dev/@anubra266/components/file-upload-1/files-list-upload.md) — by Abraham
- [File Upload](https://21st.dev/@anubra266/components/file-upload-1/directory-upload.md) — by Abraham
- [File Upload](https://21st.dev/@anubra266/components/file-upload-1/multiple-images-upload.md) — by Abraham
- [File Upload](https://21st.dev/@anubra266/components/file-upload-1/upload-with-paste.md) — by Abraham
- [File Upload](https://21st.dev/@anubra266/components/file-upload-1/avatar-upload.md) — by Abraham
- [File Upload](https://21st.dev/@anubra266/components/file-upload-1/drag-n-drop-upload.md) — by Abraham
- [File Upload](https://21st.dev/@ephraimduncan/components/file-upload-1/multi-file-dropzone.md) — by Ephraim Duncan
- [FileUpload](https://21st.dev/@flower0wine/components/file-upload.md) — by 花间酒
- [Image Cropper](https://21st.dev/@info-mdshakeeb/components/image-cropper.md) — by shakeeb
- [PDF Preview Page](https://21st.dev/@itsankitverma/components/pdf-preview-page.md) — by Ankit Verma
- [File Upload](https://21st.dev/@sean0205/components/file-upload/table-upload.md) — by Sean Hello
- [File Upload](https://21st.dev/@sean0205/components/file-upload/compact-upload.md) — by Sean Hello
- [File Upload](https://21st.dev/@sean0205/components/file-upload/avatar-upload.md) — by Sean Hello
- [File Upload](https://21st.dev/@sean0205/components/file-upload/card-upload.md) — by Sean Hello
- [File Upload](https://21st.dev/@sean0205/components/file-upload/gallery-upload.md) — by Sean Hello
- [Audio Upload Card](https://21st.dev/@isaiahbjork/components/audio-upload-card.md) — by Isaiah
- [Advanced Image Uploader](https://21st.dev/@ruixen.ui/components/advanced-image-uploader.md) — by Ruixen UI
- [File Uploader](https://21st.dev/@itsankitverma/components/file-uploader.md) — by Ankit Verma
- [File upload](https://21st.dev/@shailendrakumar19999/components/file-upload.md) — by Shailendra
- [File Uploader](https://21st.dev/@avanishverma4/components/file-uploader.md) — by Awanish Verma
- [File Upload](https://21st.dev/@extend-hq/components/file-upload.md) — by extend-hq
- [File Upload](https://21st.dev/@ephraimduncan/components/file-upload.md) — by Ephraim Duncan
- [Advanced File Upload](https://21st.dev/@uniquesonu/components/advanced-file-upload.md) — by Sonu
- [Upload Advanced](https://21st.dev/@ephraimduncan/components/upload-advanced.md) — by Ephraim Duncan
- [File Upload](https://21st.dev/@nextjsshop/components/file-upload.md) — by Nextjsshop
- [UploadThing Image Grid](https://21st.dev/@elements-/components/uploadthing-image-grid.md) — by Cameron Kelliher
- [Animated File Upload](https://21st.dev/@educlopez/components/animated-file-upload.md) — by Edu Calvo
- [File Upload](https://21st.dev/@educlopez/components/file-upload.md) — by Edu Calvo
- [File Upload Drag & Drop](https://21st.dev/@ephraimduncan/components/file-upload-04.md) — by Ephraim Duncan
- [Upload Multiple Files](https://21st.dev/@utilcn/components/upload-multiple-files.md) — by utilcn
- [File Upload with Preview](https://21st.dev/@ephraimduncan/components/file-upload-01.md) — by Ephraim Duncan
- [Reshaped File upload](https://21st.dev/@reshaped/components/reshaped-file-upload.md) — by reshaped
- [UploadThing Paste](https://21st.dev/@elements-/components/uploadthing-paste.md) — by Cameron Kelliher
- [File Upload Multi-File Dropzone](https://21st.dev/@ephraimduncan/components/file-upload-03.md) — by Ephraim Duncan
- [Chat Form Dropzone](https://21st.dev/@uilayout.contact/components/chat-form-dropzone.md) — by UI Layouts
- [Reshaped File upload](https://21st.dev/@reshaped/components/reshaped-file-upload/headless.md) — by reshaped
- [Reshaped File upload](https://21st.dev/@reshaped/components/reshaped-file-upload/inline.md) — by reshaped
- [Reshaped File upload](https://21st.dev/@reshaped/components/reshaped-file-upload/composition.md) — by reshaped
- [Reshaped File upload](https://21st.dev/@reshaped/components/reshaped-file-upload/trigger.md) — by reshaped

Full component directory: https://21st.dev/llms.txt