A macOS-style dock of uploaded files. Tiles magnify under the cursor, a dot marks files still uploading, and the whole dock is a drop target.
"use client"
import { useUploader } from "@uploadcn/react"
import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { UploadDock } from "@/components/upload-dock"
export default function UploadDockExample() {
const uploader = useUploader({ adapter: demoAdapter })
useSampleFiles(uploader, "images")
return <UploadDock uploader={uploader} />
}
Installation
npx shadcn@latest add @uploadcn/upload-dockUsage
import { UploadDock } from "@/components/upload-dock"<UploadDock accept="image/*" />Magnification follows the cursor with a spring per tile. The + tile opens the file picker. Each tile has a screen-reader label with the file name and status.
Props
Prop
Type