Overlay · astro-ui · Sheet

SheetJS

Dialog panel that slides in from a screen edge.

Features

• Slides from any edge: left / right / top / bottom
• Native <dialog> modality, backdrop, Escape — zero JS in the component
• Backdrop-click dismiss (opt-out with closeOnBackdrop={false})
• Built-in zero-JS close button (showClose, closeLabel)
• sm / md / lg / xl panel sizes (width for sides, height for top/bottom)

Usage

---
import { Button, Sheet } from "astro-ui";
---

<Button id="open-menu">Menu</Button>
<Sheet id="menu" side="left">
  <h2 slot="title">Menu</h2>
  <p>Sheet body…</p>
</Sheet>

<script>
  document.getElementById("open-menu")?.addEventListener("click", () => {
    document.getElementById("menu")?.showModal();
  });
</script>

Demos

<Button id="open-sheet">Open sheet</Button>
<Sheet id="sheet">
  <h2 slot="title">Sheet title</h2>
  <p>Sheet body…</p>
</Sheet>

<Button id="open-left">Left</Button>
<Sheet id="left" side="left"><h2 slot="title">Left</h2></Sheet>
<Button id="open-top">Top</Button>
<Sheet id="top" side="top"><h2 slot="title">Top</h2></Sheet>
<!-- sides: left | right | top | bottom -->

{/* Default: click the dark layer to close (Escape too) */}
<Button id="open-sheet">Open sheet</Button>
<Sheet id="sheet">…</Sheet>

{/* Opt out: force an explicit close action */}
<Sheet id="critical" closeOnBackdrop={false}
  ariaLabel="Critical settings">…</Sheet>

API

Props

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

• Native <dialog>: focus containment, Escape, and modality from the platform
• aria-labelledby auto-wired to the title slot ({id}-title); aria-label alternative
• Built-in close button is a real button with closeLabel

FAQ

Changelog

Version history mentioning Sheet.

Related components

If you are composing interactions in the same family, these usually pair well together.