Drawer
Bottom-sheet modal built on vaul-vue. Best for mobile-first flows; on desktop, prefer DialogResponsive which auto-swaps between Dialog and Drawer.
When to use Drawer vs DialogResponsive vs Sheet
Drawer is the mobile-style bottom sheet. DialogResponsive wraps Drawer + Dialog so the same component works on phone and desktop. Sheet is a side-anchored drawer for navigation or filters on desktop layouts.
Anatomy
Import all parts and piece them together.
vue
<script setup>
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
</script>
<template>
<Drawer>
<DrawerTrigger />
<DrawerContent>
<DrawerHeader>
<DrawerTitle />
<DrawerDescription />
</DrawerHeader>
<DrawerFooter />
<DrawerClose />
</DrawerContent>
</Drawer>
</template>Default
Slide-up bottom sheet with header, content, and close.
Scrollable content
Long content scrolls within the sheet while the footer stays put.
With form
Collect input with labelled fields and confirm in the footer.
API Reference
Props, events, and slots for each sub-component.
Drawer
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Open state. Supports v-model:open. |
| shouldScaleBackground | boolean | true | Scale the page behind the drawer (iOS-style). |
| dismissible | boolean | true | Allow swipe-down dismiss. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the drawer opens or closes. Enables v-model:open. |
DrawerTrigger / DrawerClose
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Render the child slot without the default button wrapper. |
DrawerContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Extra classes for the sheet. Includes the drag handle. |
Events
| Event | Description |
|---|---|
| escape-key-down | Fires when Escape is pressed. |
| pointer-down-outside | Fires on a pointer press outside the sheet. |
DrawerHeader / DrawerFooter / DrawerTitle / DrawerDescription
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Layout and typography wrappers for the sheet content. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Space | When focus is on the trigger, opens the drawer. |
| Enter | When focus is on the trigger, opens the drawer. |
| Tab | Moves focus to the next focusable element inside the drawer. |
| Shift+Tab | Moves focus to the previous focusable element. |
| Esc | Closes the drawer and returns focus to the trigger. |
- A vaul-based bottom sheet: focus is trapped while open and on touch it can be dismissed by swiping down.
- Provide a DrawerTitle so screen readers announce the drawer via aria-labelledby.