All components
File Drop
InputsA drop zone whose upload icon bobs, inviting a drag.
Drag & drop files here
PNG, JPG or PDF up to 10MB
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/file-drop.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/file-drop.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Drag & drop files here" | Primary instruction. |
| hint | string | - | Secondary line, e.g. accepted formats. |
Accessibility
- Presentational - wire it to a real file input for keyboard access.
- Hover state changes border and background, not colour alone.
- Hint text sits in the DOM, so constraints are announced.
Dependencies
motionclsxtailwind-mergelucide-react