Halo Dropzone

Renders an animated file dropzone with moving border trail and file-type SVG glyphs. It responds to drag and drop interactions and displays appropriate icons based on file type. Use it to allow users to upload files with visual feedback and type-specific indicators.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-dropzone

npx layro-cli add @nolly-studio/halo-dropzone

npx layro-cli add @nolly-studio/halo-dropzone

bunx layro-cli add @nolly-studio/halo-dropzone

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * File dropzone: dashed animated rim + rim blobs, frosted fill, moving border trail,
 * file-type SVG glyphs, and placeholder inference — all inlined (no `halo-card`,
 * `file-icons`, or `file-type-placeholder` imports).
 */
import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,