Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Stepper

A segmented progress bar with a title and description under each segment, for multi page forms.

Navigation and overlays6 classesNo JavaScriptLight and dark

Example

Full

Classes

6 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 stepper. On an <ol> in the example. Sets grid display, grid tracks and gap, and --tone and --tone-fg.
CSS
.stepper {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: .75rem;
}
Modifier Modifier, combined with the stepper class. On a <li> in the example. Sets flex display, alignment, gap, text size, text color and corner radius.
CSS
.stepper-item {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  font-size: .875rem;
  color: var(--muted-foreground);
  border-radius: var(--m-radius-xs);
}

.stepper-item::before {
  content: "";
  height: .25rem;
  margin-bottom: .625rem;
  border-radius: var(--m-radius-full);
  background: var(--border);
  transition: background-color var(--m-duration);
}
Modifier Modifier, combined with the stepper class. On a <li> in the example. Sets background and text color.
CSS
.stepper-done::before {
  background: var(--tone);
}

.stepper-done .stepper-title {
  color: var(--foreground);
}
Modifier Modifier, combined with the stepper class. On a <li> in the example. Sets background and text color.
CSS
.stepper-current .stepper-title {
  color: var(--tone);
}

.stepper-current::before {
  background: linear-gradient(90deg, var(--tone) 50%, color-mix(in oklab, var(--tone) 30%, var(--border)) 50%);
}
Part Part of the stepper. On a <span> in the example. Sets font weight.
CSS
.stepper-title {
  font-weight: 600;
}

.stepper-current .stepper-title {
  color: var(--tone);
}
Part Part of the stepper. On a <span> in the example. Sets text size, text style and hidden by default.
CSS
.stepper-description {
  font-size: .8125rem;
  line-height: 1.4;
}

@media (max-width: 639.98px) {
  .stepper-description {
    display: none;
  }
}

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

<!-- Stepper: start from the base class, then add modifiers -->
<ol class="stepper"><li class="stepper-item stepper-done"><span class="stepper-title">Shipping</span><span class="stepper-description">Address and delivery</span></li><li class="stepper-item stepper-current" aria-current="step"><span class="stepper-title">Payment</span><span class="stepper-description">Card or invoice</span></li><li class="stepper-item"><span class="stepper-title">Review</span><span class="stepper-description">Check and confirm</span></li></ol>

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.
Navigation and overlaysPaginationPage links with previous and next, an ellipsis, the current page, disabled items, three sizes and pill or joined styles.Navigation and overlaysStepsNumbered progress through a process with completed, current and error states, descriptions, a vertical layout and tones.Navigation and overlaysDockA mobile bottom navigation bar (also .bottom-nav) with icon items, labels, an active marker, a fixed position with safe area padding and a floating style.Navigation and overlaysLinkText links with a soft underline that firms up on hover, a hover only underline, primary, muted and danger colors and an external marker.

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.