A dropzone that fills up like a glass. The liquid level is the combined progress of every file, with a gently moving surface.
"use client"
import { demoAdapter } from "@/examples/_demo"
import { LiquidDropzone } from "@/components/liquid-dropzone"
export default function LiquidDropzoneExample() {
return (
<div className="w-full max-w-md">
<LiquidDropzone adapter={demoAdapter} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/liquid-dropzoneUsage
import { LiquidDropzone } from "@/components/liquid-dropzone"<LiquidDropzone maxFiles={20} />Two wave layers loop at different speeds for depth. The level reads from useUploadProgress, so it works for any number of files. Waves stop with prefers-reduced-motion.
Props
Prop
Type