UploadDropzoneGlass

A frosted-glass dropzone with hairline borders and an indigo glow halo on drag-over.

A premium dropzone variant inspired by the product surfaces of Vercel and Linear: frosted glass over a soft noise texture, a 1px hairline border, and an indigo glow halo that wakes up the moment a file enters the drop region. Multi-file uploads stream in parallel (batches of 3) with an inline chip for each file.

Design inspiration: Vercel dashboard cards, Linear command bar.

motion is an optional peerDependency. Without it, the component renders a static fallback with no glow animation. pnpm add motion to enable the glow transition.

Drop files to upload

Vercel · Linear — frosted glass + indigo halo

Basic usage

import { UploadDropzoneGlass } from '@uploadkitdev/react';

export default function Page() {
  return (
    <UploadDropzoneGlass
      route="imageUploader"
      accept={['image/*']}
      maxFiles={5}
      maxSize={10 * 1024 * 1024}
      onUploadComplete={(results) => {
        console.log('Uploaded:', results.map((r) => r.url));
      }}
      onUploadError={(error) => {
        console.error(error.message);
      }}
    />
  );
}

Props

Prop	Type	Default	Description
`route`	`string`	—	Required. Route name from your file router (e.g. `'imageUploader'`).
`accept`	`string[]`	—	Accepted MIME types. Supports wildcards: `'image/*'`. Client-side UX validation only.
`maxSize`	`number`	—	Maximum file size in bytes. Client-side UX validation only.
`maxFiles`	`number`	—	Maximum number of files per drop or selection. When set to `1`, the file input becomes single-select.
`metadata`	`Record<string, unknown>`	—	JSON-serializable metadata forwarded to `onUploadComplete` on the server.
`onUploadComplete`	`(results: UploadResult[]) => void`	—	Called when every accepted file has uploaded successfully.
`onUploadError`	`(error: Error) => void`	—	Called once per failed file (validation or upload error).
`disabled`	`boolean`	`false`	Disables drag, click, and the hidden file input.
`className`	`string`	—	Additional CSS class(es) merged onto the outer wrapper.
`children`	`ReactNode`	—	Custom heading. Defaults to `"Drop files to upload"`.

UploadDropzoneGlass accepts a ref forwarded to the outer <div> container.

Theming

UploadDropzoneGlass reads the following CSS custom properties from styles.css:

Variable	Purpose
`--uk-radius`	Outer border radius
`--uk-text` / `--uk-text-secondary`	Heading and subtitle text colors
`--uk-font`	Font family
`--uk-primary`	Per-file progress bar fill
`--uk-glow`	`box-shadow` applied on drag-over (`0 0 80px -20px rgba(99, 102, 241, 0.5)`)
`--uk-noise-opacity`	Opacity of the built-in SVG noise overlay

Override any of these on :root or an ancestor to reskin the component.

Accessibility

role="button" with aria-label="Drop files to upload" on the outer container
Focusable via keyboard (tabIndex={0}); Enter and Space open the file picker
focus-visible outline uses --uk-primary at 2px offset
Respects prefers-reduced-motion — the glow animation collapses to 0.01ms
When disabled, tabIndex={-1} and aria-disabled="true" are set

See the Theming guide for token overrides and dark mode.