ComponentsCore
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!
Tone
Size
Usage
Features
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.
Installation
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 motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
TypeScript
JavaScript
Copy and paste the following code into your project.
TypeScript
JavaScript
npx @libravelui@latest add drop-zoneAnatomy
import { DropZone } from "@/components/ui/core/drop-zone";<DropZone>Hit us with your best shot!</DropZone>Props
Loading types…