An hourglass for long uploads and deadlines: sand runs from the top bulb to the bottom with the progress, and the time left is shown front and center.
"use client"
import { useUploader } from "@uploadcn/react"
import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { HourglassUpload } from "@/components/hourglass-upload"
export default function HourglassUploadExample() {
const uploader = useUploader({ adapter: demoAdapter })
useSampleFiles(uploader, "artifacts")
return (
<div className="flex w-full justify-center">
<HourglassUpload uploader={uploader} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/hourglass-uploadUsage
import { HourglassUpload } from "@/components/hourglass-upload"<HourglassUpload />Both bulbs are clipped rectangles moved by one spring, so the sand in the top and bottom always adds up. The headline shows the estimated time left, updated live. With reduced motion the sand moves without the falling stream.
It uploads through your adapter like every other component, so it works with S3, R2, Cloudinary, local disk or your own API.
Props
Prop
Type