Drop zone

Composer-sized and full-page drop targets that say before the drop whether files will be accepted, and why not.

Markdown

On this page

Accept and reject feedback before the drop.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/drop-zone.json

Usage

tsx

import { DropZone } from "@/components/ui/chatcn/drop-zone"

<DropZone
  accept="image/*,.pdf"
  maxSize={20_000_000}
  onFiles={(files) => attach(files)}
  onReject={(rejections) => explain(rejections)}
  className="rounded-chatcn-xl"
>
  {children}
</DropZone>

PromptInput already includes one. Use DropZone around anything else, DropZonePage for the whole window, or DropZoneOverlay with your own state. useChatcnFileDrop is the hook underneath. Text drags pass through, so dragging a snippet into a textarea still works.

Examples

Full page

An overlay for files dragged anywhere over the window.

Props

Prop	Type	Notes
`accept`	`string`	`image/*,.pdf`. The reject message lists these in words
`maxSize`, `maxFiles`	`number`	Bytes; files per drop
`onFiles`	`(files) => void`	Accepted files
`onReject`	`(rejections) => void`	Each with `file` and `reason`
`label`, `hint`, `rejectLabel`	`ReactNode`	Overlay copy
`disabled`	`boolean`

Accessibility

Dragging is never the only way to add a file: pair it with a button that opens the picker.
The overlay is decorative (aria-hidden); report results with your own live region.
Rejection is shown with an icon and a sentence, not color alone.

Motion

150 ms opacity on enter and leave, the content settling from 0.98.
Accept to reject swaps the icon with the 150 ms blur crossfade and turns the dashed edge solid.