Dropzone (default)
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Compact
Choose files or drag here
PDF, PNG, or JPG — max 10 MB each
Compact (small)
Add attachment
Max 5 MB
Icon only
Custom icon and copy (dropzone)
Drop your cover art here
SVG, PNG, or JPG — max 5 MB
Optional label
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Multiple files
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Disabled
Uploads paused
Maintenance in progress.
Error
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Animation variants
animationVariant — click each control to compare press feedback.
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
Drop files here or browse
PNG, JPG, or PDF up to 10 MB
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| variant | Optional | "dropzone" | "compact" | "icon-only" | dropzone | Full dropzone, horizontal row, or icon-only trigger. |
| size | Optional | "sm" | "md" | md | Scale for compact and icon-only. |
| onFiles | Optional | (files: File[]) => void | — | Selected or dropped files. |
| accept / multiple | Optional | string + boolean | — | Native file input constraints. |
| ariaLabel | Optional | string | — | Accessible name when variant is icon-only. |
| disabled | Optional | boolean | — | Disables interaction. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |