Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Steps

Numbered progress through a process with completed, current and error states, descriptions, a vertical layout and tones.

Navigation and overlays10 classesNo JavaScriptLight and dark

Example

Full

Classes

10 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 steps. On an <ol> in the example. Sets flex display and text size, and --tone, --tone-fg and --step-size.
CSS
.steps {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --step-size: 2rem;
  display: flex;
  counter-reset: step;
  font-size: .875rem;
}
Modifier Modifier, combined with the steps class. On a <li> in the example. Sets flex display, alignment, gap, width, padding and text style.
CSS
.steps-vertical > .step > :where(*) {
  padding-top: .3125rem;
}

.steps-vertical > .step {
  flex-direction: row;
  align-items: flex-start;
  gap: .875rem;
  padding: 0 0 1.5rem;
  text-align: start;
}
Modifier Modifier, combined with the steps class. On a <li> in the example. Sets text color, generated content, background and border.
CSS
.step-done, .step-current {
  color: var(--foreground);
}

.step-done:not(:last-child)::after {
  background: var(--tone);
}
Modifier Modifier, combined with the steps class. On a <li> in the example. Sets text color, font weight, border and shadow.
CSS
.step-current {
  font-weight: 500;
}

.step-done, .step-current {
  color: var(--foreground);
}
Part Part of the steps. Not used in the example above. Sets generated content, text color, background and border.
CSS
.step-error::before {
  content: "!";
  color: var(--danger-foreground);
  background: var(--danger);
  border-color: var(--danger);
}
Part Part of the steps. On a <span> in the example. Sets block display, margin, text size, font weight and text color.
CSS
.step-description {
  display: block;
  margin-top: .125rem;
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the steps class. Not used in the example above. Sets alignment, gap, padding, text style, offsets and width.
CSS
.steps-vertical {
  flex-direction: column;
}

.steps-vertical > .step > :where(*) {
  padding-top: .3125rem;
}
Tone Success tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.steps-success {
  --tone: var(--success);
  --tone-fg: var(--success-foreground);
}
Tone Accent tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.steps-accent {
  --tone: var(--accent);
  --tone-fg: var(--accent-foreground);
}
Tone Neutral tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.steps-neutral {
  --tone: var(--foreground);
  --tone-fg: var(--background);
}

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

<!-- Steps: start from the base class, then add modifiers -->
<ol class="steps"><li class="step step-done"><span>Account<span class="step-description">Email and password</span></span></li><li class="step step-done"><span>Workspace<span class="step-description">Name and URL</span></span></li><li class="step step-current" aria-current="step"><span>Invite<span class="step-description">Add your team</span></span></li><li class="step"><span>Launch<span class="step-description">Go live</span></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.
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".Navigation and overlaysBreadcrumbsThe path to the current page with chevron or slash separators and an optional pill container.Navigation and overlaysPaginationPage links with previous and next, an ellipsis, the current page, disabled items, three sizes and pill or joined styles.Navigation and overlaysStepperA segmented progress bar with a title and description under each segment, for multi page forms.

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.