Docs
Components
Dropzone

Dropzone

An area into which files can be dragged and dropped.

Docs

Preview

Code

Upload files

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/dropzone

Anatomy

Single import

Multiple imports

import { Dropzone } from "~/components/ui/dropzone";

<Dropzone.Provider>
  <Dropzone.Root>
    <Dropzone.Label>Upload files</Dropzone.Label>
  </Dropzone.Root>
</Dropzone.Provider>;

Examples

With File Trigger

Preview

Code

Drop your image here

SVG, PNG, JPG or GIF (max. 5MB)

Clickable

Preview

Code

API Reference

Dropzone.Provider

Prop	Type	Default
`onDrop`	`function`
`isDisabled`	`boolean`
`getDropOperation`	`function`
`children`	`ReactNode`

Dropzone.Root

Prop	Type	Default
`children`	`ReactNode`

Dropzone.Label

Prop	Type	Default
`children`	`ReactNode`

Dialog Field

On This Page

Installation
Anatomy
Examples
With File Trigger
Clickable
API Reference
Dropzone.Provider
Dropzone.Root
Dropzone.Label

Contribute

Report an issue
Request a feature
Edit this page