A queue in motion: rows expand in and collapse out, percentages count up smoothly, active bars shimmer and finished rows draw a check.
"use client"
import { useUploader } from "@uploadcn/react"
import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { AnimatedUploadQueue } from "@/components/animated-upload-queue"
export default function AnimatedUploadQueueExample() {
const uploader = useUploader({ adapter: demoAdapter })
useSampleFiles(uploader, "documents")
return <AnimatedUploadQueue uploader={uploader} />
}
Installation
npx shadcn@latest add @uploadcn/animated-upload-queueUsage
import { AnimatedUploadQueue } from "@/components/animated-upload-queue"<AnimatedUploadQueue maxFiles={20} />Built from the same UploadItem parts as the static queue, wrapped in AnimatePresence for exit animations.
Props
Prop
Type