File Upload

A drag-and-drop file upload surface with animated accepted-file-type icons, an animated border beam, and a compact list of selected files.

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 FileUploadExample() {
  return (
    <div className="mx-auto w-full max-w-md rounded-xl border bg-background p-4">
      <FileUpload />
    </div>
  );
}