Drop Zone

Drag-and-drop upload target with visual feedback.

Drop your files here

"use client"

import { useState } from "react"

import { DropZone } from "@/components/ui/preskok-ui/drop-zone"
import { Label } from "@/components/ui/preskok-ui/field"

export function DropZonePreskokDemo() {
  const [dropped, setDropped] = useState(false)
  return (
    <DropZone onDrop={() => setDropped(true)}>
      <Label>{dropped ? "Dropped" : "Drop your files here"}</Label>
    </DropZone>
  )
}

Installation


pnpm
npm
yarn
bun
pnpm dlx @preskok-org/ui@latest add drop-zone

Usage

import { DropZone } from "@/registry/preskok/ui/preskok-ui/drop-zone"
 
export function Example() {
  return (
    <DropZone onDrop={() => {}}>
      <div slot="label">Drag and drop files here</div>
      <div slot="description">or click to select files</div>
    </DropZone>
  )
}

Props

Inherits all react-aria-components DropZone props

Switch Calendar

On This Page

Installation Usage Props