

<InteractiveDemo
  engine="source"
  name="drop-zone"
  controls="[
  	{
  		type: &#x22;string&#x22;,
  		name: &#x22;label&#x22;,
  		defaultValue: &#x22;Drop files here&#x22;,
  	},
  	{
  		type: &#x22;boolean&#x22;,
  		name: &#x22;isDisabled&#x22;,
  		defaultValue: false,
  	},
  ]"
/>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @dotui/drop-zone
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @dotui/drop-zone
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @dotui/drop-zone
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @dotui/drop-zone
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

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

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

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

## Examples [#examples]

<Examples>
  <Example name="drop-zone/demos/basic" />

  <Example name="drop-zone/demos/label" />

  <Example name="drop-zone/demos/visual-feedback" />

  <Example name="drop-zone/demos/file-trigger" />

  <Example name="drop-zone/demos/events" />

  <Example name="drop-zone/demos/disabled" />
</Examples>

## API Reference [#api-reference]

### DropZone [#dropzone]

<Reference name="drop-zone" />

### DropZoneLabel [#dropzonelabel]

<Reference name="drop-zone-label" />
