# Sketchpad Dropzone

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/sketchpad-dropzone

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/sketchpad-dropzone?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt