Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Sign in progress

A 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 in4 classesNo JavaScriptLight and dark

Example

Full

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
Base Base class of the sign in progress. On an <ol> in the example. Sets grid display, grid tracks, gap, margin and padding, and --tone.
CSS
.auth-flow {
  --tone: var(--primary);
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: auth-flow;
}
Modifier Modifier, combined with the auth-flow class. On a <li> in the example. Sets grid display, gap, width, text size, font weight and text color.
CSS
.auth-flow-step[aria-current=step] {
  color: var(--foreground);
  font-weight: 600;
}

.auth-flow-step {
  display: grid;
  gap: .5rem;
  min-width: 0;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  counter-increment: auth-flow;
}
Part Part of the sign in progress. On a <span> in the example. Sets flex display, alignment, gap, overflow, text style and generated content.
CSS
.auth-flow-label {
  display: flex;
  align-items: center;
  gap: .375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-flow-label::before {
  content: counter(auth-flow);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: var(--m-border-width) solid color-mix(in oklab, var(--foreground) 18%, transparent);
  border-radius: var(--m-radius-full);
}
Modifier Modifier, combined with the auth-flow class. On a <li> in the example. Sets text color, generated content, border and background.
CSS
.auth-flow-done {
  color: var(--foreground);
}

.auth-flow-done::before {
  background-size: 100% 100%;
}

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">

<!-- Sign in progress: start from the base class, then add modifiers -->
<div class="grid gap-6 max-w-sm">
  <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>
  <ol class="auth-flow" aria-label="Sign in progress">
    <li class="auth-flow-step auth-flow-done"><span class="auth-flow-label">Password<span class="sr-only">, completed</span></span></li>
    <li class="auth-flow-step" aria-current="step"><span class="auth-flow-label">Verify</span></li>
    <li class="auth-flow-step"><span class="auth-flow-label">Done</span></li>
  </ol>
  <ol class="auth-flow" aria-label="Sign in progress">
    <li class="auth-flow-step auth-flow-done"><span class="auth-flow-label">Password<span class="sr-only">, completed</span></span></li>
    <li class="auth-flow-step auth-flow-done"><span class="auth-flow-label">Verify<span class="sr-only">, completed</span></span></li>
<!-- 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

  • 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, 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.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.Navigation and overlaysStepsNumbered progress through a process with completed, current and error states, descriptions, a vertical layout and tones.

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.