Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Modal

A centered dialog over a blurred backdrop. Open it with command="show-modal" (or link to its id for a :target fallback), close it with command="close", a form with method="dialog" or Escape. Five widths, a top aligned variant and a bottom sheet on phones.

Navigation and overlays14 classesNo JavaScriptLight and dark

Example

Full

Classes

14 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 modal. On a <dialog> in the example. Sets overflow, fixed position, offsets, stacking order, hidden by default and alignment, and --modal-w, --modal-speed and --modal-from.
CSS
.modal[open], .modal:target {
  display: grid;
  opacity: 1;
}

.modal::backdrop, .lightbox::backdrop {
  background: transparent;
}
Part Part of the modal. On a <div> in the example. Sets stacking order, transform, transition, width, height and overflow.
CSS
.modal-box, .modal > .command-palette {
  position: relative;
  z-index: 1;
  transform: var(--modal-from);
  transition: transform var(--modal-speed) var(--m-ease);
}

.modal-box {
  width: 100%;
  max-width: var(--modal-w);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--surface);
  color: var(--foreground);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-2xl);
  box-shadow: var(--m-shadow-xl);
}
Part Part of the modal. On a <div> in the example. Sets flex display, alignment, gap, margin and padding.
CSS
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  padding-inline-end: 2rem;
}
Part Part of the modal. On a <h2> in the example. Sets text size, font weight and text style.
CSS
.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}
Part Part of the modal. On a <p> in the example. Sets text size and text style.
CSS
.modal-body {
  font-size: .875rem;
  line-height: 1.6;
}
Part Part of the modal. On a <form> in the example. Sets flex display, alignment, gap, margin and width.
CSS
@media (max-width: 639.98px) {
  .modal-actions > * {
    width: 100%;
  }
}

@media (max-width: 639.98px) {
  .modal-actions {
    flex-direction: column-reverse;
  }
}
Part Part of the modal. On a <button> in the example. Sets absolute position, offsets, grid display, alignment, width and height.
CSS
.modal-close:hover {
  color: var(--foreground);
  background: color-mix(in oklab, var(--foreground) 7%, transparent);
}

.modal-close::before,
.lightbox-close::before,
.lightbox-prev::before,
.lightbox-next::before,
.back-to-top::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background: currentColor;
  mask: var(--m-nav-x) center / contain no-repeat;
}
Part Part of the modal. On a <form> in the example. Sets fixed position, offsets, block display, text color, width and height.
CSS
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: block;
  color: transparent;
}

.modal-backdrop > * {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  cursor: default;
}
Size Small size. Not used in the example above. Sets --modal-w.
CSS
.modal-sm {
  --modal-w: 24rem;
}
Size Large size. Not used in the example above. Sets --modal-w.
CSS
.modal-lg {
  --modal-w: 48rem;
}
Size Extra large size. Not used in the example above. Sets --modal-w.
CSS
.modal-xl {
  --modal-w: 64rem;
}
Modifier Modifier, combined with the modal class. Not used in the example above. Sets height, and --modal-w.
CSS
.modal-full {
  --modal-w: 100%;
}

.modal-full .modal-box {
  height: 100%;
  max-height: none;
}
Modifier Modifier, combined with the modal class. Not used in the example above. Sets alignment and padding, and --modal-from.
CSS
.modal-top {
  align-items: start;
  padding-top: min(12vh, 6rem);
  --modal-from: translateY(-.75rem) scale(.98);
}
Modifier Modifier, combined with the modal class. On a <dialog> in the example. Sets alignment, padding, width, height, border and corner radius, and --modal-from.
CSS
@media (max-width: 639.98px) {
  .modal-bottom {
    align-items: end;
    padding: 0;
    --modal-from: translateY(100%);
  }
}

@media (max-width: 639.98px) {
  .modal-bottom .modal-box {
    max-width: none;
    max-height: 90dvh;
    border-bottom: 0;
    border-radius: var(--m-radius-3xl) var(--m-radius-3xl) 0 0;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

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

<!-- Modal: start from the base class, then add modifiers -->
<button type="button" commandfor="delete-modal" command="show-modal" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Delete project</button><dialog id="delete-modal" class="modal modal-bottom" aria-labelledby="delete-title"><div class="modal-box"><div class="modal-header"><h2 id="delete-title" class="modal-title">Delete this project?</h2></div><button type="button" commandfor="delete-modal" command="close" class="modal-close" aria-label="Close"></button><p class="modal-body text-muted-foreground">All deployments, domains and analytics for Acme Web will be removed. This cannot be undone.</p><form method="dialog" class="modal-actions"><button class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-muted">Cancel</button><button class="inline-flex items-center justify-center rounded-lg bg-danger px-4 py-2 text-sm font-medium text-danger-foreground hover:opacity-90" value="delete">Delete</button></form></div><form method="dialog" class="modal-backdrop"><button aria-label="Close">Close</button></form></dialog>

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

  • Built on the native dialog element. Opened with showModal() (or a command button) it goes to the top layer, makes the rest of the page inert, closes with Escape and returns focus to the button that opened it.
  • 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.
Navigation and overlaysDrawer dialogA modal side panel built on <dialog>, opened with command="show-modal" and closed with command="close" or a click outside (closedby="any"). Slides in from any edge.Navigation and overlaysResponsive drawerAn app shell whose drawer is a toggled overlay on small screens and a sticky, always open sidebar from the lg breakpoint.Navigation and overlaysSheetA bottom sheet dialog with a grab handle that slides up from the bottom edge, for share menus and quick actions on touch screens.Navigation and overlaysPopoverA floating card on the native popover attribute: light dismiss, Escape and focus return for free. Anchored to its button where anchor positioning is supported, centered otherwise.

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.