Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

QR code

A QR code generated in the browser (byte mode, error correction level M, versions 1 to 10, up to 213 bytes) as a crisp SVG. Dark modules stay on a light tile in dark mode too, so every camera can read it. Three sizes. Needs monsoon.js.

Two factor and sign in4 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-qr

Options

OptionDescription
data-m-qr-value="any text or URL"
data-m-qr-label="QR code" (accessible name)
data-m-qr-border="2"
data-m-qr-mask="0" (0 to 7, chosen automatically when left out)

Methods

MethodDescription
Monsoon.qr(el).value
Monsoon.qr(el).value = "https://example.com"
Monsoon.qr(el).version
Monsoon.qr(el).modules (rows of 0 and 1)

Events

EventDescription
monsoon:qr-render { version, size, mask }
monsoon:qr-error { message }

Classes

4 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
Modifier Modifier, combined with the qr-code class. On a <div> in the example. Sets grid display, alignment, width, padding, text color and background, and --qr-size, --qr-light and --qr-dark.
CSS
.qr[data-qr-error]::before {
  background: var(--danger);
  opacity: .15;
}

@media (forced-colors: active) {
  .qr {
    forced-color-adjust: none;
  }
}
Base Base class of the qr code. Not used in the example above. Sets block display, width and height.
CSS
.qr-code {
  display: block;
  width: 100%;
  height: 100%;
}

.qr:not(:has(> .qr-code))::before {
  content: "";
  position: absolute;
  inset: 14%;
  background: repeating-conic-gradient(var(--qr-dark) 0 25%, transparent 0 50%) 0 0 / 12.5% 12.5%;
  border-radius: var(--m-radius-sm);
  opacity: .08;
}
Modifier Modifier, combined with the qr-code class. On a <div> in the example. Sets corner radius, and --qr-size.
CSS
.qr-sm {
  --qr-size: 8rem;
  border-radius: var(--m-radius-lg);
}
Modifier Modifier, combined with the qr-code class. On a <div> in the example. Sets corner radius, and --qr-size.
CSS
.qr-lg {
  --qr-size: 14rem;
  border-radius: var(--m-radius-2xl);
}

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>

<!-- QR code: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-end gap-6">
  <div class="qr qr-sm" data-m-qr data-m-qr-value="https://example.com" data-m-qr-label="QR code for example.com"></div>
  <div class="qr" data-m-qr data-m-qr-value="WIFI:T:WPA;S:Example Guest;P:monsoon-rain-42;;" data-m-qr-label="QR code to join the Example Guest network"></div>
  <div class="qr qr-lg" data-m-qr data-m-qr-value="otpauth://totp/Example:you%40example.com?secret=JBSWY3DPEHPK3PXP&amp;issuer=Example&amp;algorithm=SHA1&amp;digits=6&amp;period=30" data-m-qr-label="QR code for an authenticator app"></div>
</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

  • 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.
Two factor and sign inVerify screenThe second step after the password: masked destination, code cells that submit when complete, a resend link with a countdown, another method link and a "Don't ask again on this device for 30 days" checkbox. Needs monsoon.js for the cells and the countdown.Data display and layoutMockup codeA terminal style code frame where each pre line can take a data-prefix.Data display and layoutCode blockA code listing with a header for the file name.Two factor and sign inVerification codeOne cell per character on top of the CSS only .otp-field: auto advance, Backspace goes back, arrows, Home and End, paste or SMS autofill of the whole code from any cell (spaces and dashes are stripped), error shake and success states, masked mode and a monsoon:otp-complete event. The field stays in the form with the full value. 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.