Component
Mobile Drawer Component for Framer
This is a Framer component based on Emil Kowalski’s Vaul — designed for mobile overlay replacements in Framer. Instead of using overlay, you can use a drawer that slides up from the bottom and includes full control over the trigger, handle, padding, and content.
Created by



About the resource
To use the Drawer component in Framer, customize its appearance and behavior through three main sets of controls: Trigger, Content, and Handle.
The Trigger Controls let you define how the drawer's activation button behaves—choose between default sizing or let it expand to fill available space both horizontally and vertically.
About the resource
To use the Drawer component in Framer, customize its appearance and behavior through three main sets of controls: Trigger, Content, and Handle.
The Trigger Controls let you define how the drawer's activation button behaves—choose between default sizing or let it expand to fill available space both horizontally and vertically.
About the resource
To use the Drawer component in Framer, customize its appearance and behavior through three main sets of controls: Trigger, Content, and Handle.
The Trigger Controls let you define how the drawer's activation button behaves—choose between default sizing or let it expand to fill available space both horizontally and vertically.

The properties and trigger controls in the drawer component in Framer.

The properties and trigger controls in the drawer component in Framer.

The properties and trigger controls in the drawer component in Framer.
The Content Controls give you full control over the drawer’s body: preview it directly on canvas, adjust its width, background, overlay color, padding, and corner radius for a refined look and layout.
The Content Controls give you full control over the drawer’s body: preview it directly on canvas, adjust its width, background, overlay color, padding, and corner radius for a refined look and layout.
The Content Controls give you full control over the drawer’s body: preview it directly on canvas, adjust its width, background, overlay color, padding, and corner radius for a refined look and layout.

The content controls in the drawer component in Framer.

The content controls in the drawer component in Framer.

The content controls in the drawer component in Framer.
The Handle Controls allow you to tweak the draggable handle at the top—change its color, size, corner radius, and vertical positioning to match your UI style.
The Handle Controls allow you to tweak the draggable handle at the top—change its color, size, corner radius, and vertical positioning to match your UI style.
The Handle Controls allow you to tweak the draggable handle at the top—change its color, size, corner radius, and vertical positioning to match your UI style.

The handle controls in the drawer component in Framer.

The handle controls in the drawer component in Framer.

The handle controls in the drawer component in Framer.