Interactive

Paste an image

Focus the zone and paste an image with Ctrl V, or drop one: a preview appears, a file input inside receives the file for the form, and Delete clears it. Needs monsoon.js.

Interactive2 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

clipboard-image.html

<div class="paste-zone max-w-sm" tabindex="0" data-m-clipboard-image aria-label="Screenshot: focus and paste an image">
  <p><span class="font-medium text-foreground">Paste a screenshot</span><br>Click here, then press <kbd class="kbd kbd-xs">Ctrl</kbd> <kbd class="kbd kbd-xs">V</kbd> or drop an image</p>
  <input type="file" name="screenshot" accept="image/*" hidden>
</div>

JavaScript API

Attribute

data-m-clipboard-image

Options

Option	Description
`data-m-clipboard-image-global (catch pastes anywhere on the page)`
`an input type="file" inside receives the image`

Methods

Method	Description
`Monsoon.clipboardImage(el).file`
`Monsoon.clipboardImage(el).clear()`

Events

Event	Description
`monsoon:paste-image { file, url } (preventDefault skips the preview)`
`monsoon:paste-clear`

Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the paste an image. On a <div> in the example. Sets grid display, alignment, gap, height, padding and text size, and `--tone`. CSS `.paste-zone:hover { border-color: color-mix(in oklab, var(--border), var(--foreground) 30%); } .paste-zone[data-filled]::before, .paste-zone[data-filled] > :not(.paste-zone-preview) { display: none; }`
	Modifier	Modifier, combined with the paste-zone class. Not used in the example above. Sets width, height, corner radius and shadow. CSS `.paste-zone-preview { max-width: 100%; max-height: 16rem; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-md); object-fit: contain; } .paste-zone[data-filled]::before, .paste-zone[data-filled] > :not(.paste-zone-preview) { display: none; }`

Base

Base class of the paste an image. On a <div> in the example. Sets grid display, alignment, gap, height, padding and text size, and --tone.

CSS

.paste-zone:hover {
  border-color: color-mix(in oklab, var(--border), var(--foreground) 30%);
}

.paste-zone[data-filled]::before, .paste-zone[data-filled] > :not(.paste-zone-preview) {
  display: none;
}

Modifier

Modifier, combined with the paste-zone class. Not used in the example above. Sets width, height, corner radius and shadow.

CSS

.paste-zone-preview {
  max-width: 100%;
  max-height: 16rem;
  border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-md);
  object-fit: contain;
}

.paste-zone[data-filled]::before, .paste-zone[data-filled] > :not(.paste-zone-preview) {
  display: none;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Paste an image: start from the base class, then add modifiers -->
<div class="paste-zone max-w-sm" tabindex="0" data-m-clipboard-image aria-label="Screenshot: focus and paste an image">
  <p><span class="font-medium text-foreground">Paste a screenshot</span><br>Click here, then press <kbd class="kbd kbd-xs">Ctrl</kbd> <kbd class="kbd kbd-xs">V</kbd> or drop an image</p>
  <input type="file" name="screenshot" accept="image/*" hidden>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#JavaScript API

#Classes

#Usage

#Accessibility

#Related components

Example

JavaScript API

Classes

Usage

Accessibility

Related components