Yami UI

A standalone drag-and-drop area for file input.

Drop files here, or browse

Any file up to 10 MB

Installation

Add the dropzone component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/dropzone.json

Usage

import { Dropzone } from "@/components/ui/dropzone"

<Dropzone
  accept="image/*"
  multiple
  onDrop={(files) => console.log(files)}
/>

Examples

Default

Drop files here, or browse

Any file up to 10 MB

Code

import { Dropzone } from "@/components/ui/dropzone"

<Dropzone onDrop={(files) => console.log(files)} />

Custom content

Use DropzoneIcon, DropzoneTitle, DropzoneDescription slots

Drop images here, or browse

PNG, JPG, GIF up to 5 MB each

Code

import { Dropzone, DropzoneIcon, DropzoneTitle, DropzoneDescription } from "@/components/ui/dropzone"
import { ImageIcon } from "lucide-react"

<Dropzone accept="image/*" multiple onDrop={(files) => console.log(files)}>
  <DropzoneIcon><ImageIcon /></DropzoneIcon>
  <DropzoneTitle>
    Drop images here, or{" "}
    <span className="text-primary underline underline-offset-2">browse</span>
  </DropzoneTitle>
  <DropzoneDescription>PNG, JPG, GIF up to 5 MB each</DropzoneDescription>
</Dropzone>

Disabled

Drop files here, or browse

Any file up to 10 MB

Code

import { Dropzone } from "@/components/ui/dropzone"

<Dropzone disabled />