A folder that opens as you hover or drag files over it. Dropped files fly in, and the folder's front shows the upload progress.
"use client"
import { demoAdapter } from "@/examples/_demo"
import { FolderUpload } from "@/components/folder-upload"
export default function FolderUploadExample() {
return <FolderUpload adapter={demoAdapter} name="Q3 Reports" />
}
Installation
npx shadcn@latest add @uploadcn/folder-uploadUsage
import { FolderUpload } from "@/components/folder-upload"<FolderUpload name="Q3 Reports" maxFiles={20} />The folder opens with CSS on hover and while dragging (group-data-dragging), and the flying files use motion. With prefers-reduced-motion, files don't fly and the folder doesn't tilt.
Props
Prop
Type