Dropzone

Component 112

About

Dropzone is a component that allows you to drag-and-drop files into a container to process them.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dropzone to your project and fits it to your theme.

Code

How Dropzone is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { useState } from 'react';
import {
  Dropzone,
  DropzoneContent,
  DropzoneEmptyState,
} from '@/components/ui/dropzone';

const Example = () => {
  const [files, setFiles] = useState<File[] | undefined>();

  const handleDrop = (files: File[]) => {
    console.log(files);
    setFiles(files);
  };

  return (
    <div className="flex h-screen w-full max-w-[500px] items-center justify-center p-8">
      <Dropzone
        maxSize={1024 * 1024 * 10}
        minSize={1024}
        maxFiles={10}
        accept={{ 'image/*': [] }}
        onDrop={handleDrop}
        src={files}
        onError={console.error}
      >
        <DropzoneEmptyState />
        <DropzoneContent />
      </Dropzone>
    </div>
  );
}

export { Example };