Drawer
shadcn/ui
Vaul
Mobile-friendly slide-up panel with drag-to-close. Built on Vaul. Use Sheet for desktop.
@/components/ui/drawerDirections
| direction | Demo | Usage |
|---|---|---|
| bottom (default) | Mobile action sheets, quick actions — slides up from bottom edge | |
| top | Notifications, banners — slides down from top | |
| left | Mobile nav sidebar — slides in from left | |
| right | Detail panels on mobile — prefer Sheet on desktop |
In context — ticket table row (mobile)
Tickets
Fix login redirect
T7A3763
Open
Update ticket filters
T7A3801
In Progress
Drawer vs Sheet
| Drawer | Sheet | |
|---|---|---|
| Best for | Mobile, touch-first interactions | Desktop detail panels, settings |
| Close method | Drag down + backdrop click + button | Backdrop click + button + Escape |
| Handle | Visible drag handle at top | No handle |
| Vaul-based | Yes — native feel on mobile | No — Radix Dialog |
Sub-components
| Component | Role |
|---|---|
| Drawer | Root — wraps trigger and content. direction prop: "bottom" (default) | "top" | "left" | "right" |
| DrawerTrigger | Element that opens the drawer — use asChild to pass any button |
| DrawerContent | The panel — slides in from the configured direction |
| DrawerHeader | Top section with title + description |
| DrawerTitle | Heading — required for accessibility |
| DrawerDescription | Subtitle / context text below title |
| DrawerFooter | Bottom section — typically Cancel + primary action |
| DrawerClose | Closes the drawer on click — use asChild for custom button |
On this page