UploadCN
DocsComponentsExamples

Stamp

A pile of paperwork for contracts, filings and HR documents: each document lands on the pile and gets a rubber stamp the moment it is received.

"use client"

import { useUploader } from "@uploadcn/react"

import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { StampUpload } from "@/components/stamp-upload"

export default function StampUploadExample() {
  const uploader = useUploader({ adapter: demoAdapter })
  useSampleFiles(uploader, "contracts")
  return (
    <div className="flex w-full justify-center">
      <StampUpload uploader={uploader} />
    </div>
  )
}

Installation

npx shadcn@latest add @uploadcn/stamp-upload

Usage

import { StampUpload } from "@/components/stamp-upload"
<StampUpload stamp="Filed" />

The four most recent documents stay on the pile with small fixed tilts, so the server and client render the same. Each stamp carries the date in the user's locale. With reduced motion the stamp fades in instead of slamming down.

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

On this page

InstallationUsageProps