File Upload

A drag-and-drop file upload surface with accepted file type icons and a compact file list. Validates accepted file types, shows an animated border beam while dragging, and renders queued files with thumbnails.

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

import { FileUpload } from "@/components/ui/file-upload"

export default function FileUploadDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-8">
      <div className="w-full max-w-md">
        <FileUpload />
      </div>
    </div>
  )
}