Components
Dropzone [react-aria-components]
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.
"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 }
Dependencies
Source
Published
Similar components
Explore more
Part of Jolly UI — browse the full library on 21st.dev.