dotUI

Drop Zone

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

Overview

Examples

<DropZone>
  <UploadIcon className="size-5 text-fg-muted" />
</DropZone>

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/drop-zone

Use drop zones to allow users to drag and drop files or content into a designated area.

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

<DropZone>
  <DropZoneLabel>Drop files here</DropZoneLabel>
</DropZone>

Use the controls below to experiment with different drop zone props and see the live preview and code update.

Drop files here

label

isDisabled

<Dynamic(DropZone)>
  <Dynamic(DropZoneLabel)>Drop files here</Dynamic(DropZoneLabel)>
</Dynamic(DropZone)>

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

Prop	Type	Default
	`boolean`	`—`
	`((types: DragTypes, allowedOperations: DropOperation[]) => DropOperation)`	`—`
	`ReactNode \| function`	`—`

Missing description.