Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Trusted devices

Active sessions and trusted devices: device icon, browser and system, location and last activity, a This device badge with a live dot, and revoke buttons, plus a way to sign out everywhere else.

Two factor and sign in7 classesNo JavaScriptLight and dark

Example

Full

Classes

7 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
Part Part of the trusted devices. On an <ul> in the example. Sets grid display, margin, padding, background, border and corner radius.
CSS
.auth-devices {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-2xl);
}
Base Base class of the trusted devices. On a <li> in the example. Sets grid display, grid tracks, alignment, gap, padding and border.
CSS
.auth-device + .auth-device {
  border-top: var(--m-border-width) solid var(--border);
}

.auth-device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
}
Modifier Modifier, combined with the auth-device class. On a <li> in the example. Sets text color, background, generated content, absolute position, offsets and width.
CSS
.auth-device-current .auth-device-icon {
  color: var(--primary);
  background-color: color-mix(in oklab, var(--primary) 12%, var(--surface));
}

.auth-device-current .auth-device-icon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: .75rem;
  height: .75rem;
  background-color: var(--success);
  border: 2px solid var(--surface);
  border-radius: var(--m-radius-full);
}
Part Part of the trusted devices. On a <span> in the example. Sets grid display, alignment, width, height, text color and background.
CSS
.auth-device-icon > svg {
  width: 1.25rem;
  height: 1.25rem;
}

.auth-device-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--muted-foreground);
  background-color: var(--surface-2);
  border-radius: var(--m-radius-full);
}
Part Part of the trusted devices. On a <div> in the example. Sets grid display, gap and width.
CSS
.auth-device-body {
  display: grid;
  gap: .125rem;
  min-width: 0;
}
Part Part of the trusted devices. On a <p> in the example. Sets flex display, alignment, gap, margin, text size and font weight.
CSS
.auth-device-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
}
Part Part of the trusted devices. On a <p> in the example. Sets flex display, alignment, gap, margin, text size and text color.
CSS
.auth-device-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5rem;
  margin: 0;
  font-size: .75rem;
  color: var(--muted-foreground);
}

.auth-device-meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: .5rem;
  vertical-align: middle;
  background-color: currentColor;
  border-radius: var(--m-radius-full);
  opacity: .6;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Trusted devices: start from the base class, then add modifiers -->
<section class="grid gap-3 max-w-2xl" aria-labelledby="sessions-title">
  <div class="flex flex-wrap items-end justify-between gap-2">
    <div>
      <h3 class="text-base font-semibold" id="sessions-title">Where you're signed in</h3>
      <p class="text-sm text-muted-foreground">Devices that skip the second step for 30 days are marked Trusted.</p>
    </div>
    <button type="button" class="btn btn-sm btn-outline btn-danger">Sign out other sessions</button>
  </div>
  <ul class="auth-devices">
    <li class="auth-device auth-device-current">
      <span class="auth-device-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4.5" y="5" width="15" height="10.5" rx="1.5"/><path d="M2.5 19h19"/></svg></span>
      <div class="auth-device-body">
        <p class="auth-device-name">Chrome on macOS <span class="badge badge-success badge-sm">This device</span></p>
        <p class="auth-device-meta"><span>Lisbon, Portugal</span><span>203.0.113.24</span><span>Active now</span></p>
<!-- the full example is in the Code tab above -->

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

  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • 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 inSign in progressA compact step indicator for the sign in flow: password, second factor, done. Completed steps get .auth-flow-done (with a check), the current one aria-current="step".Two factor and sign inMagic link sentCheck your email: an animated envelope, the masked address, buttons that open the common mail apps, a resend link with a countdown and a way back to the password. Needs monsoon.js for the countdown.Two factor and sign inNew passwordPassword with a reveal toggle, a four step strength meter and a live rule checklist: length, lower and upper case, a number, a symbol, and not a common password, keyboard run or repeated character. Needs monsoon.js.Two factor and sign inSign in, centeredA centered sign in card on a soft backdrop: passkey first, then email and password, the flow progress, and a footer link. Composes the card shell with the native form fields; needs monsoon.js only for the reveal button.

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.