Drop Zone

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

Example

Hit us with your best shot!

Usage

There is no native element to implement a drop zone in HTML. DropZone helps achieve accessible dropzone components that can be styled as needed.

Styleable – Hover, keyboard focus, and the drop target states are provided for easy styling. These styles only apply when interacting with an appropriate input device, unlike CSS pseudo classes.
Accessible – Support for native drag and drop via mouse and touch, as well as keyboard and screen reader interactions. Copy and paste is also supported as a keyboard accessible alternative.
Flexible – Files, directories, and custom data types can be dropped, and the contents of the drop zone can be fully customized.

Required Component

This component depends on Field. Make sure you have installed and configured it before using this component.

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

TypeScript

JavaScript

lib/utils.ts

Copy and paste the following code into your project.

TypeScript

JavaScript

components/ui/core/drop-zone.tsx

npx libravelui@latest add drop-zone

import { DropZone } from "@/components/ui/core/drop-zone";

<DropZone>Hit us with your best shot!</DropZone>

Loading types…