@monetr/vaul

    Scaled background

    Opt into the iOS-style "card stack" effect by setting shouldScaleBackground on Drawer.Root and tagging an ancestor with data-vaul-drawer-wrapper="".

    App content

    This inner card carries data-vaul-drawer-wrapper. When the drawer opens it scales down and rounds at the top, creating the iOS-style stacked card look. Imagine this card is your whole app shell.

    InboxDraftsSentTrash
    <div data-vaul-drawer-wrapper=''>
  <YourApp />
  <Drawer.Root shouldScaleBackground>...</Drawer.Root>
</div>

    Vaul finds the first element with data-vaul-drawer-wrapper and applies a transform: scale(0.93) plus border-radius: 8px to it while the drawer is open. When the drawer closes everything reverts.

    Background color

    By default, vaul also temporarily sets the document body color to black so the rounded wrapper has dark margins. Pass setBackgroundColorOnScale={false} to keep your page color:

    <Drawer.Root setBackgroundColorOnScale={false} shouldScaleBackground>
  ...
</Drawer.Root>

    Multiple wrappers

    Only the first data-vaul-drawer-wrapper element found in the DOM gets scaled. If you embed the demo inside another wrapped section, the outer wrapper wins, which is usually what you want.