Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Sign in, centered

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

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

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 sign in, centered. On a <div> in the example. Sets grid display, alignment, height, padding and background.
CSS
.auth-layout {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: clamp(1.5rem, 6vw, 3.5rem) 1rem;
  background-color: var(--background);
  background-image: radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent),
    radial-gradient(color-mix(in oklab, var(--foreground) 9%, transparent) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}
Base Base class of the sign in, centered. On a <form> in the example. Sets grid display, gap, width, padding, text color and background, and 4 custom properties.
CSS
.auth-card {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --auth-pad: clamp(1.25rem, 5vw, 2rem);
  --auth-radius: var(--m-radius-3xl);
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 26rem;
  padding: var(--auth-pad);
  color: var(--foreground);
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--auth-radius);
  box-shadow: var(--m-shadow-lg);
}
Part Part of the sign in, centered. On a <header> in the example. Sets grid display, alignment, gap and text style.
CSS
.auth-header {
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
}
Part Part of the sign in, centered. On a <span> in the example. Sets grid display, alignment, width, height, margin and text color, and --tone.
CSS
.auth-icon > svg {
  width: 1.5rem;
  height: 1.5rem;
}

.auth-icon {
  --tone: var(--primary);
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  margin-block-end: .25rem;
  color: var(--tone);
  background-color: color-mix(in oklab, var(--tone) 11%, var(--surface));
  border-radius: var(--m-radius-2xl);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent), 0 1px 2px color-mix(in oklab, var(--tone) 18%, transparent);
}
Part Part of the sign in, centered. On a <h2> in the example. Sets margin, text size, font weight and text style.
CSS
.auth-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}
Part Part of the sign in, centered. On a <p> in the example. Sets width, margin, text size, text style and text color.
CSS
.auth-description {
  max-width: 44ch;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.auth-header-start > .auth-description {
  max-width: 60ch;
}

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>

<!-- Sign in, centered: start from the base class, then add modifiers -->
<div class="auth-layout">
  <form class="auth-card" action="#" onsubmit="event.preventDefault()">
    <ol class="auth-flow" aria-label="Sign in progress">
      <li class="auth-flow-step" aria-current="step"><span class="auth-flow-label">Password</span></li>
      <li class="auth-flow-step"><span class="auth-flow-label">Verify</span></li>
      <li class="auth-flow-step"><span class="auth-flow-label">Done</span></li>
    </ol>
    <header class="auth-header">
      <span class="auth-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="5" y="10.5" width="14" height="10" rx="2.5"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.5v2"/></svg></span>
      <h2 class="auth-title">Sign in to Example</h2>
      <p class="auth-description">Welcome back. Use a passkey or your email and password.</p>
    </header>
    <button type="button" class="btn btn-outline btn-block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9.5" cy="8" r="3.5"/><path d="M3.5 20a6 6 0 0 1 9.4-4.9"/><circle cx="17.5" cy="12.5" r="2.5"/><path d="M17.5 15v6l1.6-1.3M17.5 18l1.4 1"/></svg> Continue with a passkey</button>
    <div class="divider my-0">or</div>
<!-- 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

  • 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.
  • 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, splitTwo columns: the second factor step on one side and an illustration panel with a quote on the other, drawn with inline SVG over the theme colors. The panel hides itself when the container is narrow. Needs monsoon.js for the code cells and the countdown.Two factor and sign inSign in, compactA compact card for popovers, sidebars and embedded flows: the method switcher and code entry in a tight layout with .auth-card-compact. Needs monsoon.js for the code cells.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 inTrusted devicesActive 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.

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.