File Upload

Premium file upload components with drag-and-drop support, real-time progress, and beautiful micro-interactions.

4 Variants

CLI Install

Drop & Upload

A modern drag-and-drop zone with animated feedback, file listing, and individual progress tracking.

Drag and drop files or browse from your computer

Max 3 FilesPDF, PNG, JPG

$npx shadcn@latest add https://aftershade.pages.dev/registry/file-upload.json

Native drag and drop API support with beautiful hover states and scale animations.

Individual file progress tracking with smooth transitions and status indicators.

Built with TypeScript, supports custom file type filtering and file count limits.

A cinematic selection interaction where your file transforms into a card and physically slides into an archive box.

$npx shadcn@latest add https://aftershade.pages.dev/registry/archive-upload.json

Realistic 3D box lid opening with CSS perspective and GSAP orchestration.

A sequence that visually explains the action of storing or archiving a file.

Includes professional bounce and compression effects for tactile feedback.

A fluid, organic interaction where files are "immersed" into a liquid pool and absorbed. Features custom blob physics and satisfying wave fills.

Organic Liquid Absorption

$npx shadcn@latest add https://aftershade.pages.dev/registry/liquid-morph-upload.json

An intense, physics-based interaction. Files are pulled into a high-energy core with magnetic force and shocking impact.

High-Velocity Magnetic Snap
Ready for data ingestion

$npx shadcn@latest add https://aftershade.pages.dev/registry/magnetic-snap-upload.json

Used for smooth interactions and state transitions.

npm install gsap

Lightweight and beautiful SVG icons.

npm install lucide-react