About
A file dropzone whose border rings ripple outward while a file is dragged over it and burst briefly when the file is dropped.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ripple Dropzone to your project and fits it to your theme.
Code
How Ripple Dropzone is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import RippleDropzone from "@/components/ui/ripple-dropzone";
import { mockAdapter, MiB, UploadError } from "@uploadcn/core";
// A simulated adapter so the demo shows real upload states without a real
// backend. In your app, pass a real adapter (e.g. s3Adapter) instead.
// Adapted verbatim (trimmed to just the adapter) from uploadcn's own docs
// demo helper at apps/docs/examples/_demo.ts.
const demoAdapter = mockAdapter({
speed: 0.6 * MiB,
latency: 300,
fail: ({ file }) =>
file.name.startsWith("corrupt")
? new UploadError("Connection reset while uploading", {
code: "http",
status: 500,
})
: null,
});
export default function RippleDropzoneDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<RippleDropzone adapter={demoAdapter} />
</div>
);
}
Dependencies
More by uploadcn
View all
Morphing Upload Button
Progress Ring Upload