Animated File Upload

Forms 93

About

A drag-and-drop file upload dropzone with animated states, file list, size validation, and remove controls.

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

Code

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

Usage.tsx

"use client";

import AnimatedFileUpload from "@/components/ui/animated-file-upload";

export default function AnimatedFileUploadDemo() {
  return (
    <div className="mx-auto w-full max-w-md p-4">
      <AnimatedFileUpload
        accept="image/*,.pdf,.doc,.docx"
        maxSize={10 * 1024 * 1024}
        onFilesSelected={() => {}}
      />
    </div>
  );
}