A dropzone with a pulse: rings ripple out while files are dragged over it, and a burst confirms the drop.
"use client"
import { demoAdapter } from "@/examples/_demo"
import { RippleDropzone } from "@/components/ripple-dropzone"
export default function RippleDropzoneExample() {
return <RippleDropzone adapter={demoAdapter} />
}
Installation
npx shadcn@latest add @uploadcn/ripple-dropzoneUsage
import { RippleDropzone } from "@/components/ripple-dropzone"<RippleDropzone title="Drop to upload" />It uses the dropzone's render prop to read isDragging and isDragReject; rings turn red for files that don't match accept.
Props
Prop
Type