Skip to content

Conversation

@Harshul23
Copy link

Summary

This PR introduces a new withOverlay prop for both the Drawer and Sheet components.
It allows developers to optionally disable the overlay layer for cases where a transparent or inline experience is desired.

Context

Fixes #8493

Currently, the Drawer and Sheet components always render an overlay when open.
In some design scenarios (e.g. side panels, persistent drawers, nested overlays), developers may want to disable the overlay without forking the component.


Changes

  • Added optional withOverlay?: boolean prop (default: true) to:
    • DrawerContent
    • SheetContent
  • Conditionally render overlay only when withOverlay is true
  • Preserved accessibility and focus trapping behavior
  • Maintained animation and scroll-lock logic compatibility
  • Verified nested usage (Sheet inside Drawer) to avoid context conflicts
  • Updated types and docs for new prop usage

Example Usage

<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent withOverlay={false}>
    <p>Overlay disabled example</p>
  </DrawerContent>
</Drawer>

Additional Notes

  • Default behavior remains unchanged (backward-compatible)
  • Ensured no breakage in nested dialog scopes (createDialogScope)
  • Tested visually and via keyboard navigation

@vercel
Copy link

vercel bot commented Oct 17, 2025

@Harshul23 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat]: Sheet/Drawer Overlay toggle option

1 participant