A typewriter for manuscripts and document submissions: each file name is typed onto a page that rolls out of the machine, with its status beside it.
"use client"
import { useUploader } from "@uploadcn/react"
import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { TypewriterUpload } from "@/components/typewriter-upload"
export default function TypewriterUploadExample() {
const uploader = useUploader({ adapter: demoAdapter })
useSampleFiles(uploader, "documents")
return (
<div className="flex w-full justify-center">
<TypewriterUpload uploader={uploader} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/typewriter-uploadUsage
import { TypewriterUpload } from "@/components/typewriter-upload"<TypewriterUpload title="Manuscript" />Names are typed a character at a time, but screen readers get the full name at once from a visually hidden copy. The page grows a line per file, and the keys press while uploads run. With reduced motion, text appears immediately and the keys stay still.
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