ComponentsCore
Drag and Drop
A flexible drop zone component for handling file uploads or custom drag-and-drop interactions.
Example
Usage
Installation
Required Component
This component depends on Field, Badge, Button, Drop Zone and Progress. Make sure you have installed and configured it before using this component.Field
The Field component is fundamental and used by many other components. It applies consistent, reusable styles and appears in inputs, labels, descriptions, and other related elements.
Badge
A small label used to display statuses, counts, or notifications.
Button
A button lets users perform an action or trigger an event using mouse, touch, or keyboard input. It's a key interactive element in most user interfaces.
Drop Zone
A drop zone is an area into which one or multiple objects can be dragged and dropped.
Progress
Progress show either determinate or indeterminate progress of an operation over time.
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.
Copy and paste the following code into your project.
npx libravelui@latest add drag-and-dropAnatomy
import { DragAndDrop } from "@/components/ui/core/drag-and-drop";<DragAndDrop
label="Upload your files"
description="Drag files here or click to select"
badge="Supported: images, videos, docs"
acceptedFileType={[
"image/png",
"image/jpeg",
"video/mp4",
"application/pdf",
"text/plain",
]}
maxSize={10} // max size 10MB
multiple={true}
size="lg"
isLoading={false}
hidePreview={false}
onError={(error) => console.error("Error:", error)}
onFileAdd={(file) => console.log("File added:", file)}
onFileRemove={(file) => console.log("File removed:", file)}
onClear={() => console.log("Files cleared")}
classNames={{
wrapper: "border border-gray-300 rounded-md p-4",
dropZone: "bg-gray-50 hover:bg-gray-100 transition",
}}
{/* Controlled props (uncomment to test controlled mode) */}
files={controlledFiles}
errors={controlledErrors}
onFilesChange={setControlledFiles}
onErrorsChange={setControlledErrors}
disableErrorMessage={false}
/>Another Examples
Accepted Type(s)
Drag and drop that only accepts specific data types. Useful for restricting interactions to valid targets.
Usage
Controlled
Drag and drop behavior managed entirely through external state. Ideal for complex logic or synced updates.
Usage
Custom Build Children
Drag and drop with fully customizable children. Offers complete control over layout and interactive behavior.
Usage
Props
Loading types…