Drop a file anywhere on the chat
Wrap a surface in the zone and a file dragged anywhere over it lands, so nobody has to aim for the composer. While files hover, an overlay covers the surface and says what letting go will do. Dropping is a pointer path, so pair it with an attach button for the keyboard.
Try it
Drag one or more files over the panel. Its edge lights up and the surface frosts over, and the files appear as tiles when you let go. They are read in your browser and go nowhere.
What it leaves alone
The zone only reacts to a drag that carries files. Dragging selected text or a link across it does nothing, and it keeps a file drop to itself so a drop target around it never handles the same files twice.
// From the npm package
import { AttachmentDropZone } from 'rift-ds/components/AttachmentDropZone/AttachmentDropZone';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/attachment-drop-zone.json