The Sketchpad Drop Zone component is an interactive and visually engaging file upload interface built with Shadcn UI and Lucide icons. Instead of a standard rectangle, the drop zone is styled like a sketchpad or doodle space, giving a creative, fun feel to file uploads. Users can either drag and drop files or click anywhere on the sketchpad to open the file manager. Each uploaded file animates into a “pinned note” card on the canvas, with smooth Framer Motion transitions. Files can be individually removed using the trash icon, which is fully separated from the click area to prevent accidental file manager triggers. The component is theme-aware, supporting both light and dark modes, and is fully configurable with onDrop and onRemove callbacks, making it ideal for modern, user-friendly web applications.
"use client"
import * as React from "react"
import { SketchpadDropzone, DropFile } from "@/components/ui/sketchpad-dropzone"
import { v4 as uuidv4 } from "uuid"
import { Button } from "@/components/ui/button"
export default function DemoSketchpadDropzone() {
const [files, setFiles] = React.useState<DropFile[]>([])
const handleDrop = (fileList: FileList) => {
const newFiles = Array.from(fileList).map((file) => ({
id: uuidv4(),
file
}))
setFiles((prev) => [...prev, ...newFiles])
}
const handleRemove = (id: string) => {
setFiles((prev) => prev.filter((f) => f.id !== id))
}
return (
<div className="p-6 space-y-6">
<h1 className="text-2xl font-semibold">Sketchpad Drop Zone Demo</h1>
<p className="text-sm text-muted-foreground">
Drag and drop files onto the sketchpad. They will appear as pinned notes.
</p>
<SketchpadDropzone files={files} onDrop={handleDrop} onRemove={handleRemove} />
<Button
onClick={() => setFiles([])}
variant="outline"
className="mt-4"
>
Clear All
</Button>
</div>
)
}
Part of Ruixen UI — browse the full library on 21st.dev.