1

Mobile DrawerNew

A bottom-sheet drawer with swipe-to-dismiss, focus trap, scroll lock, and grab handle. The canonical mobile overlay.

Dependencies

motion

Interaction Type

Open to slide up from bottom. Swipe down, tap overlay, or press Escape to close. Focus is trapped inside.

Props

Options you can pass to customize this component.

Prop
Type
Description
open*
boolean

Controlled open state.

onClose*
() => void

Called when drawer should close.

dismissible
boolean

Enable swipe/overlay dismiss. Defaults to true.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/mobile-drawer.json

How to use

<MobileDrawer open={open} onClose={() => setOpen(false)} aria-label="Filters">
  <MobileDrawerTitle>Filters</MobileDrawerTitle>
  {/* content */}
</MobileDrawer>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/mobile-drawer.json