Docs
Dropzone Primitive

Dropzone Primitive

A dropzone is an area into which one or multiple objects can be dragged and dropped.

DocsAPI Reference

About

The <DropzonePrimitive /> component is built on top of react-dropzone, wrapping the library to deliver a more consistent API that aligns with Radix UI conventions.

Installation

pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add dropzone-primitive

Anatomy

import * as DropzonePrimitive from "@/components/ui/dropzone-primitive"
 
export default () => (
  <DropzonePrimitive.Root>
    <DropzonePrimitive.Input />
    <DropzonePrimitive.Zone />
    <DropzonePrimitive.Trigger />
    <DropzonePrimitive.DragAccepted />
    <DropzonePrimitive.DragRejected />
    <DropzonePrimitive.DragDefault />
    <DropzonePrimitive.Accepted />
    <DropzonePrimitive.Rejected />
  </DropzonePrimitive.Root>
)
Date PickerPassword Input