AIR Stack

Appearance

Side Sheet ​

Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen. They are often used for filters, details panels, or secondary navigation on wider screens.

Theme Variables ​

You can customize the maximum width and the border radius of side sheets by overriding their CSS variables.

css
:root {
  --air-side-sheet-radius: var(--radius-xl); /* 28px default */
  --air-side-sheet-max-width: 25rem; /* 400px default */
}

Composed Utilities ​

The following composed utilities automatically handle the layout, z-indexing, scrim backdrop, and horizontal sliding animations.

html
<!-- Background Scrim -->
<!-- Toggle data-state="open" via JavaScript to show -->
<div class="side-sheet-scrim" data-state="open"></div>

<!-- The Side Sheet -->
<!-- Toggle data-state="open" via JavaScript to slide in -->
<div class="side-sheet shadow-3" data-state="open">
  <div class="p-4 flex items-center justify-between">
    <h2 class="title-large">Filters</h2>
    <button class="icon-button">
      <span class="material-symbols-outlined">close</span>
    </button>
  </div>
  
  <div class="p-4">
    <p class="body-medium">Side sheet content goes here.</p>
  </div>
</div>

Positioning Modifiers ​

By default, the side-sheet composed utility anchors to the right edge of the screen. You can change this behavior by explicitly applying the left positioning utility.

  • side-sheet: The primary container. It establishes fixed positioning (z-index: 50), enforces the --air-side-sheet-max-width, and applies a surface-container-low background. By default, it includes side-sheet-right, which anchors it to the trailing edge, applies corner radii to the left side, and translates it off-screen to the right (translateX(100%)).
  • side-sheet-left: An optional layout modifier. Apply this class alongside side-sheet-base and side-sheet-surface (instead of using the composed side-sheet class) to anchor the sheet to the leading edge instead. It applies corner radii to the right side and translates off-screen to the left (translateX(-100%)).

Scrim ​

  • side-sheet-scrim: Applied to a backdrop element placed behind the side sheet. It uses a fixed layout (z-index: 40) to cover the entire viewport. By default, it is invisible and ignores pointer events. When data-state="open" is applied, it fades in a dark overlay (color-scrim mixed at 32% opacity) and intercepts clicks.