Components

Drawer

A panel that slides in from any edge of the screen, built on Vaul with smooth drag-to-dismiss gestures and a dimmed overlay.

Basic usage

Compose a DrawerTrigger with DrawerContent. State is managed internally — no useState required.

Set direction on the root to slide in from any edge. Side drawers cap at sm:max-w-sm; top and bottom at max-h-[80vh].

The header and footer stay pinned while a flex-grown body scrolls. Wrap long content in an overflow-y-auto region.

Props below are set on the root Drawer. All subcomponents forward their native and Vaul props.

Prop	Type	Default	Description
`direction`	'top' \| 'bottom' \| 'left' \| 'right'	`'bottom'`	Edge the drawer slides in from. Set on the root Drawer.
`open`	boolean	`—`	Controls the open state. Omit for an uncontrolled drawer managed internally.
`defaultOpen`	boolean	`false`	Initial open state when uncontrolled.
`onOpenChange`	(open: boolean) => void	`—`	Called when the drawer is requested to open or close.
`modal`	boolean	`true`	When true, interaction with outside elements is blocked while open.
`dismissible`	boolean	`true`	Allow closing by dragging or clicking the overlay.
`shouldScaleBackground`	boolean	`false`	Scales the page behind the drawer for the iOS-style stacked effect.
`snapPoints`	(number \| string)[]	`—`	Optional snap positions for partially-open states.
`children`required	React.ReactNode	`—`	Trigger and content subcomponents.

Focus is trapped inside the drawer while open and restored to the trigger on close.
The overlay and surrounding page are marked inert in modal mode, so screen readers stay scoped to the drawer.
Always include a DrawerTitle — it labels the dialog for assistive tech; pair it with DrawerDescription for context.
Pressing Esc or clicking the overlay dismisses the drawer unless dismissible is false.