File Upload

Interactive and animated file upload component with drag-and-drop and progress animations.

Preview

Upload your files

Drag & drop files here, or browse

Supports images, documents, videos, and more

This component is available on 21st.dev.

Installation

NPM

npx shadcn@latest add "https://21st.dev/r/hextaui/file-upload"

global.css

/* tailwind v4 */

@theme {
  /* ......... your code ......... */
  --animate-glow-slow: glow 2.5s ease-in-out infinite;
  --animate-bounce-drop: bounceDrop 0.8s ease;

  @keyframes glow {
    0% {
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    }
    50% {
      box-shadow: 0 0 16px rgba(59, 130, 246, 0.8);
    }
  }

  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }
}

Usage

app/page.tsx

import FileUpload from "@/components/FileUpload";

export default function Page() {
  return (
    <main className="min-h-screen flex items-center justify-center p-4">
      <FileUpload />
    </main>
  );
}