Modal & Non-modal

GlideSheet supports both modal and non-modal modes. Modal is the default and includes overlay, focus trap, and body scroll lock.

Modal mode (default)

When modal={true} (the default), the sheet:

• Renders an overlay behind the sheet
• Traps focus inside the sheet
• Locks body scrolling
• Closes on overlay click (when dismissible)
• Closes on ESC key

// Modal (default) — overlay, focus trap, body scroll lock
<BottomSheet.Root open={open} onOpenChange={setOpen} modal={true}>
  <BottomSheet.Portal>
    <BottomSheet.Overlay />
    <BottomSheet.Content>
      <BottomSheet.Handle />
      {/* Content */}
    </BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet.Root>

Non-modal mode

Set modal={false}for a sheet that doesn't block the page. The user can interact with the content behind the sheet.

// Non-modal — no overlay, no body lock, page stays interactive
<BottomSheet.Root open={open} onOpenChange={setOpen} modal={false}>
  <BottomSheet.Portal>
    <BottomSheet.Content>
      <BottomSheet.Handle />
      {/* Content */}
    </BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet.Root>

Unlike some libraries, GlideSheet's non-modal mode doesn't leak pointer-events: none to the body — the page stays fully interactive.

Dismissible

Set dismissible={false} to prevent the user from closing the sheet by dragging, pressing ESC, or clicking the overlay. The sheet can only be closed programmatically.

<BottomSheet.Root dismissible={false}>
  {/* Can only be closed via onOpenChange */}
</BottomSheet.Root>