Sheet — Vanilla

Slide-out panel (drawer) with vanilla HTML. Open/close via JS.

Sheet

Drawer from top/right/bottom/left. Use sheet__overlay, sheet__content, sheet__header, sheet__title, sheet__close, sheet__body. Set data-side="right" (or top/bottom/left). Wire open/close in JS.

Add this component

The command below includes <strong>Sheet</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Structure (open via JS)

Use Astro or Svelte component for full behavior, or wire your own script.

HTML

html html 
<!-- Use .sheet-root so overlay stacks behind the sheet. openSheet_<id>(), closeSheet_<id>(). side: sheet--right | sheet--left | sheet--top | sheet--bottom -->
<div class="sheet-root">
  <div class="sheet__overlay" data-sheet-overlay id="my-sheet-overlay" aria-hidden="true"></div>
  <div class="sheet sheet--right" id="my-sheet" data-sheet aria-hidden="true" hidden>
    <div class="sheet__content">
      <div class="sheet__header">
        <h2 class="sheet__title">Title</h2>
        <button type="button" class="sheet__close" aria-label="Close" data-sheet-close></button>
      </div>
      <div class="sheet__body">Content</div>
    </div>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React