Drawer
A panel that slides in from the top, bottom, left, or right edge of the screen. Use for sheet-style panels, mobile drawers, and side panels. Supports regular and wide widths for side drawers. Built on Vaul.
Bottom (Default)
Top
Left Side
Right Side
Usage
Use bottom drawers for mobile-friendly interactions with swipe-to-dismiss. Use left/right drawers for navigation, detail panels, or editing workflows. Use top for banners or compact controls.
Choose regular width (320px) for simple content and wide (448px) for richer layouts like forms or editors.
The bottom drawer shows a drag handle automatically. Use showCloseButton on DrawerContent for an X in the corner (sheet-style) when you don't want a footer close button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | Edge the drawer slides from (on Drawer) |
| width | "default" | "wide" | "default" | Width for left/right drawers (on DrawerContent) |
| showCloseButton | boolean | true | Show an X close button in the top-right (on DrawerContent) |
| open | boolean | — | Controlled open state |
| onOpenChange | (open: boolean) => void | — | Callback when open state changes |
| shouldScaleBackground | boolean | true | Scale the background when open |