About
A wrapper that turns any region into a file drop target, showing a quiet overlay only while files are dragged over it (and optionally accepting pasted files), ported to React from Jose Estevez's elastic-ui Vue library.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds File Drop Zone to your project and fits it to your theme.
Code
How File Drop Zone is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import FileDropZone from "@/components/ui/file-drop-zone";
import { useState } from "react";
export default function FileDropZoneDemo() {
const [names, setNames] = useState<string[]>([]);
function handleAdd(files: File[]) {
setNames((prev) => [...prev, ...files.map((f) => f.name)]);
}
return (
<div className="flex min-h-[400px] w-full items-center justify-center p-10">
<FileDropZone
paste
className="w-[28rem] rounded-xl border border-[color-mix(in_oklab,var(--color-bg)_82%,black)] p-4"
onAdd={handleAdd}
>
<textarea
placeholder="Write here. Drag a file over this box, or paste one."
rows={6}
className="w-full resize-none rounded-md border border-border bg-transparent p-2 text-sm outline-none"
/>
<p className="mt-2 text-xs text-fg-secondary">
Taken: {names.join(", ") || "nothing yet"}
</p>
</FileDropZone>
</div>
);
}
Dependencies
More by joseestevez520
View all
Marquee
Chart
Day Strip
Prose