Components
Loading preview...
A drop zone is an area into which one or multiple objects can be dragged and dropped. There is no native element to implement a drop zone in HTML. DropZone helps achieve accessible dropzone components that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/dropzone"use client"
import React from "react"
import { Text } from "react-aria-components"
import { DropZone } from "@/components/ui/dropzone"
function DropZoneDemo() {
let [dropped, setDropped] = React.useState(false)
return (
<DropZone onDrop={() => setDropped(true)} className='bg-background'>
<Text slot="label">
{dropped ? "Successful drop!" : "Drop files here"}
</Text>
</DropZone>
)
}
export { DropZoneDemo }