File Drop

Upload zone that lifts and glows while a file is over it.

Drag files here, or click to browseimage/*

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/file-drop.json

Adds components/velora/file-drop.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`onFiles`	`(files: File[]) => void`	`—`
`accept` Passed straight to the underlying input	`string`	`—`
`multiple`	`boolean`	`true`
`className`	`string`	`—`

Reduced motion: The 200ms transition is removed, so on drag-over the zone snaps to its lifted, brand-bordered state instead of easing into it.
Keyboard: Tab reaches the visually hidden file input, the zone shows a focus ring, and Enter or Space opens the file picker.
Screen readers: The file input is wrapped in a label, so it is announced with the zone's text (the instruction plus the accepted types); the selected-file list is not a live region.

Upload zone that lifts and glows while a file is over it.

Drag files here, or click to browseimage/*

pnpm dlx shadcn@latest add https://paulkeys.org/r/file-drop.json

Adds components/velora/file-drop.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`onFiles`	`(files: File[]) => void`	`—`
`accept` Passed straight to the underlying input	`string`	`—`
`multiple`	`boolean`	`true`
`className`	`string`	`—`

Reduced motion: The 200ms transition is removed, so on drag-over the zone snaps to its lifted, brand-bordered state instead of easing into it.
Keyboard: Tab reaches the visually hidden file input, the zone shows a focus ring, and Enter or Space opens the file picker.
Screen readers: The file input is wrapped in a label, so it is announced with the zone's text (the instruction plus the accepted types); the selected-file list is not a live region.