Monsoon v0.2.0
Made by Alexandre Kohler Star

Media and files

Signature pad

Smooth, speed and pressure aware strokes with pen colors and width, undo, clear, PNG and SVG export, and strokes that survive a resize; the result goes into a hidden input. A typed name field stays available for people who cannot draw. It needs monsoon.js. Without it only the typed name field shows.

Media and files10 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

JavaScript API

Attribute

data-m-signature on a .signature; the pad, canvas and toolbar are created when missing

Options

OptionDescription
data-m-signature-colorsComma list of pen colors, CSS colors or tokens, var(--foreground),var(--primary),var(--info) by default.
data-m-signature-widthPen width in pixels, 2.5 by default.
data-m-signature-formatpng (default) or svg, for the hidden input value.
data-m-signature-inputSelector of the hidden input, defaults to one inside.
data-m-signature-placeholderText on the empty pad, Sign here by default.
data-m-signature-toolbarfalse hides the toolbar.

Methods

MethodDescription
Monsoon.signature(el).toDataURL(type, quality, options)PNG by default. options: { scale, background }.
Monsoon.signature(el).toBlob(type, quality, options)Promise of a Blob.
Monsoon.signature(el).toSVG(options)SVG markup string with one path per segment.
Monsoon.signature(el).toData() and fromData(strokes)Saves and restores the strokes.
Monsoon.signature(el).undo() and clear()Removes the last or every stroke.
Monsoon.signature(el).setColor(color) and setWidth(px)Changes the pen.
Monsoon.signature(el).emptyTrue when nothing is drawn.

Events

EventDescription
monsoon:signature-changedetail.empty and detail.strokes after each stroke, undo or clear.

Keyboard

Ctrl or Cmd and Z undoes while the pad has focus.

Classes

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

ClassTypeWhat it does
Base Base class of the signature pad. On a <div> in the example. Sets grid display, gap, width, hidden by default and opacity, and --tone.
CSS
.signature:not([data-empty]) .signature-hint {
  opacity: 0;
}

.signature:not([data-enhanced]) .signature-pad {
  display: none;
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets height, overflow, border, corner radius, background and shadow.
CSS
.signature-pad:has(.signature-canvas:focus-visible) {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

.signature-pad {
  position: relative;
  height: 11rem;
  overflow: hidden;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
  background: linear-gradient(color-mix(in oklab, var(--muted-foreground) 35%, transparent), color-mix(in oklab, var(--muted-foreground) 35%, transparent)) 1.5rem calc(100% - 2.75rem) / calc(100% - 3rem) var(--m-border-width) no-repeat,
    var(--surface);
  box-shadow: var(--m-shadow-xs);
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets block display, width, height, border and crosshair cursor.
CSS
.signature-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  cursor: crosshair;
  touch-action: none;
}

.signature-pad:has(.signature-canvas:focus-visible) {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets absolute position, offsets, text color, text size, transition and generated content.
CSS
.signature-hint::before {
  content: "\00d7";
  margin-right: 0.375rem;
  font-size: 1.125rem;
}

.signature-hint {
  position: absolute;
  bottom: 3.25rem;
  left: 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  pointer-events: none;
  transition: opacity var(--m-duration) var(--m-ease);
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets flex display, alignment and gap.
CSS
.signature-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets flex display and gap.
CSS
.signature-colors {
  display: flex;
  gap: 0.375rem;
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets width, height, padding, border, corner radius and background.
CSS
.signature-swatch:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

.signature-swatch[aria-pressed=true] {
  box-shadow: 0 0 0 calc(var(--m-border-width) * 2) var(--swatch, var(--foreground));
  scale: 1.08;
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets alignment and width.
CSS
.signature-width {
  flex: 1 1 6rem;
  max-width: 10rem;
}
Modifier Modifier, combined with the signature class. Not used in the example above. Sets flex display, gap and margin.
CSS
.signature-actions {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
Part Part of the signature pad. On an <input> in the example. Sets width.
CSS
.signature-fallback {
  min-width: 0;
}

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>

<!-- Signature pad: start from the base class, then add modifiers -->
<div class="signature max-w-lg" data-m-signature><input type="hidden" name="signature"><label class="grid gap-1 text-sm"><span class="text-muted-foreground">Or type your full name</span><input class="input signature-fallback" name="signature_name" autocomplete="name"></label></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.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Media and filesBefore and after compareTwo pictures (or any two elements) split by a divider that follows the pointer, a finger or the keyboard through a native range input, with optional labels. It needs monsoon.js. Without it a fixed half and half split shows.Media and filesCompare verticalA top and bottom split. It needs monsoon.js.Media and filesDropzoneDrag and drop, click to browse or paste files, with type, size and count validation, previews for images, GIFs, video, audio and documents, progress, retry, remove, reorder and a total; the native input stays in sync so a normal form submit sends the files. It needs monsoon.js. Without it the native file input still works.Media and filesDropzone compactA single row dropzone for tight forms, here for one PDF up to 2 MB. It needs monsoon.js.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.