Velora UI

File Drop

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

  • 1.4 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/file-drop.json

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

Props

PropTypeDefault
onFiles(files: File[]) => void—
accept

Passed straight to the underlying input

string—
multiplebooleantrue
classNamestring—

Accessibility

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.