RRenDSv0.13.0
GitHubGet started

Composite

Sheet Requires JS

An edge-anchored panel that slides in from a side of the screen. The mobile-first equivalent of a Drawer — bottom sheet on phones, side sheet on desktops, your call.

About

Overview

Sheets carry secondary surfaces — filter panels, navigation menus, comment threads — without leaving the page. They're like Dialog but visually attached to an edge instead of floating in the center, which feels more grounded on touch.

Sheet vs Dialog vs Sidebar. Sidebar is permanent on wide screens. Dialog is centered modal. Sheet is dismissible from an edge — best when you don't want the sidebar to take permanent room but the user opens it often.

Live

Demo

<ren-sheet side="right" id="filters">
  <header class="ren-sheet-header">
    <h2 class="ren-sheet-title">Filters</h2>
    <button class="ren-sheet-close" data-sheet-close aria-label="Close">×</button>
  </header>
  <div class="ren-sheet-body">…</div>
</ren-sheet>

<button data-sheet-trigger="filters">Open</button>

Filters

Adjust filters to refine the results.

Share

Pick where to share this link.

Reference

API

ClassEffect
.ren-sheetThe panel itself. Surface, padding, scrolls if content overflows.
.ren-sheet-overlayThe dimmed backdrop behind the sheet.
.ren-sheet-handleOptional drag handle indicator (used on bottom sheets).

Web Component attributes

AttributeTypeDefaultNotes
side"right" | "left" | "top" | "bottom""right"Edge the sheet slides from.
size"sm" | "md" | "lg" | "full""md"Width (for left/right) or height (for top/bottom).
openbooleanfalseProgrammatic open / close.
dismissiblebooleantrueIf false, only the close button can dismiss (no backdrop click, no Esc).

Inclusive by default

Accessibility

  • Sheet is a modal: focus trapped inside while open; Esc closes; backdrop click closes.
  • Use role="dialog" with aria-labelledby pointing at the sheet's heading.
  • On open, focus moves to the first focusable element inside (or the close button).
  • On close, focus returns to the trigger.