Components

File Dropzone

Drop zone whose dashed border brightens into a soft lumen glow while a file hovers over it, the upload glyph nudging upward in anticipation.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add file-dropzone

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { FileDropzone } from "@lumora/ui/components/file-dropzone";
// or from the barrel:
import { FileDropzone } from "@lumora/ui";

Props worth knowing

onFiles receives the full accepted list whenever it changes; accept and multiple mirror the native input, and label swaps the prompt. Accepted files stack below in an animated list — removing one collapses its row. Click or press Enter to open the picker. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.