Dropzone

A dashed area that takes dropped files or opens the file picker on click, Enter or Space, with a drag-over state and an overlay mode.

shadcn Base UIUsed in 2 blocks

Installation

npx shadcn@4.19.0 add https://ui.edbn.me/r/dropzone.json

Source

Usage

dropzone-basic.tsx

29 lines

"use client";
import * as React from "react";
import { Upload } from "lucide-react";
import {
  Dropzone,
  DropzoneDescription,
  DropzoneIcon,
  DropzoneTitle,
} from "@/components/ui/dropzone";

export default function DropzoneBasicPreview() {
  const [files, setFiles] = React.useState<File[]>([]);

  return (
    <div className="flex w-full max-w-compact flex-col gap-2">
      <Dropzone onFiles={setFiles}>
        <DropzoneIcon>
          <Upload />
        </DropzoneIcon>
        <DropzoneTitle>Upload files</DropzoneTitle>
        <DropzoneDescription>or drop them here</DropzoneDescription>
      </Dropzone>
      <p role="status" className="text-small text-muted-foreground">
        {files.length > 0 &&
          `${files.length} ${files.length === 1 ? "file" : "files"} chosen`}
      </p>
    </div>
  );
}

Dropzone

Installation

Source

Usage

Used in blocks

Usage

Used in blocks