Drop zone

File drop zone drawn as a ripple simulation; dropped or picked files are listed with a simulated dotted progress bar.

<hf-dropzone>· loading

Trydrag a file onto it, or click to browse.

Installation

pnpm dlx shadcn@latest add @lumesec/hf-dropzone

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-dropzone.json

Usage

import { HfDropzone } from "@/components/lumesec/hf-dropzone";

export function Example() {
  return (
    <HfDropzone />
  );
}

Behaviour

The surface is a small wave simulation: dragging a file over it raises ripples under the pointer, dropping makes a splash, and each file gets a dotted progress bar.

API reference

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

filesReact proponFilesDetail{ files: File[] }

Fires once per drop or file-picker selection with every selected file.

uploadedReact proponUploadedDetail{ name: string, size: number }

Fires per file when its simulated progress reaches 100%. size is in bytes. Not fired for files over 25 MB.

Keyboard

Keys	Action
Enter / Space	Open the file picker.

Accessibility

The drop area has role="button", tabindex="0" and aria-label="Upload files: drop them here or press to browse".
The file list is an aria-live="polite" region.
A hidden native <input type="file" multiple> handles browsing.
Reduced motion: the wave simulation, pointer ripples, random drips and marching border are off and the surface is static; list rows still fade in.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --destructive, --foreground, --lumesec, --lumesec-success and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-danger, --ui-fg, --ui-mono, --ui-muted and --ui-ok.

Notes

Uploads are simulated and nothing is sent. Progress advances on a timer and uploaded fires when it completes; handle real uploads from the files event.
Files over 25 MB are marked too large. The limit and the up to 25 MB each text are fixed.
Up to six files per batch are listed and the list keeps the five most recent rows; files still carries every file.
Not form-associated: a name attribute has no effect and files are not submitted with a form.

<hf-button>

Buttonhf-button

<hf-switch>

Switchhf-switch

<hf-segmented>

Segmented controlhf-segmented

<hf-input>

Text fieldhf-input

Was this page helpful?

Related