Docs
Dropzone

Dropzone

A drop zone is an area into which one or multiple objects can be dragged and dropped.

react-aria-components
Drop files here

Installation

Copy and paste the following code into your project.

"use client"
 
import * as React from "react"
import { DropZone, DropZoneProps } from "react-aria-components"
 
import { cnv } from "@/lib/utils"
 
const _DropZone = ({ className, ...props }: DropZoneProps) => (
  <DropZone
    className={(values) =>
      cnv(
        values,
        "flex flex-col gap-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm data-[drop-target]:border-solid data-[drop-target]:border-primary data-[drop-target]:bg-accent",
        className
      )
    }
    {...props}
  />
)
 
export { _DropZone as DropZone }

Update the import paths to match your project setup.

Usage

Basic

Drop files here

File

To allow the selection of files from the user's device, pass FileTrigger as a child of DropZone.

Drop files here
Date PickerCheckbox