Drawer

Drawer slides a panel in from the screen edge and supports drag-to-dismiss. Defaults to the bottom edge; suited for mobile sheets. For desktop side panels, use Sheet.

Drawer is an exception to the general Using components pattern.

Code

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Schedule delivery</Button>
  </DrawerTrigger>

  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Schedule delivery</DrawerTitle>
      <DrawerDescription>
        Confirm the delivery window for this order.
      </DrawerDescription>
    </DrawerHeader>

    <div className="tw:p-4 tw:text-sm tw:text-muted-foreground">
      Dispatch will use this window to reserve truck capacity.
    </div>

    <DrawerFooter>
      <Button>Confirm delivery</Button>

      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

API

Drawer

Name	Type/Description
`activeSnapPoint`	`string \| number \| null \| undefined`
`autoFocus`	`boolean \| undefined`
`closeThreshold = 0.25`	`number \| undefined` Number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
`container`	`HTMLElement \| null \| undefined`
`defaultOpen = false`	`boolean \| undefined` Opened by default, skips initial enter animation. Still reacts to `open` state changes
`direction = "'bottom'"`	`"top" \| "bottom" \| "left" \| "right" \| undefined` Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
`disablePreventScroll = false`	`boolean \| undefined` When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
`dismissible = true`	`boolean \| undefined` When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
`fixed`	`boolean \| undefined` When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
`handleOnly = false`	`boolean \| undefined` When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
`modal = true`	`boolean \| undefined` When `false` it allows to interact with elements outside of the drawer without closing it.
`nested`	`boolean \| undefined`
`noBodyStyles`	`boolean \| undefined` When `true` the `body` doesn't get any styles assigned from Vaul
`onAnimationEnd`	`((open: boolean) => void) \| undefined` Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered. Useful to revert any state changes for example.
`onClose`	`(() => void) \| undefined`
`onDrag`	`((event: PointerEvent<HTMLDivElement>, percentageDragged: number) => void) \| undefined`
`onOpenChange`	`((open: boolean) => void) \| undefined`
`onRelease`	`((event: PointerEvent<HTMLDivElement>, open: boolean) => void) \| undefined`
`open`	`boolean \| undefined`
`preventScrollRestoration`	`boolean \| undefined`
`repositionInputs = true when {@link snapPoints } is defined`	`boolean \| undefined` When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to `false` will fall back to the default browser behavior.
`scrollLockTimeout = 500ms`	`number \| undefined` Duration for which the drawer is not draggable after scrolling content inside of the drawer.
`setActiveSnapPoint`	`((snapPoint: string \| number \| null) => void) \| undefined`
`setBackgroundColorOnScale = true`	`boolean \| undefined` When `false` we don't change body's background color when the drawer is open.
`shouldScaleBackground`	`boolean \| undefined`
`snapToSequentialPoint = false`	`boolean \| undefined` Disabled velocity based swiping for snap points. This means that a snap point won't be skipped even if the velocity is high enough. Useful if each snap point in a drawer is equally important.

DrawerClose

Use asChild to render a custom element as the close button.

Name	Type/Description
`asChild`	`boolean \| undefined`

DrawerContent

Name	Type/Description
`asChild`	`boolean \| undefined`

DrawerDescription

Name	Type/Description
`asChild`	`boolean \| undefined`

DrawerFooter

No documented props

DrawerHeader

No documented props

DrawerOverlay

Name	Type/Description
`asChild`	`boolean \| undefined`

DrawerPortal

No documented props

DrawerTitle

Name	Type/Description
`asChild`	`boolean \| undefined`

DrawerTrigger

Use asChild to render a custom element as the drawer trigger.

Name	Type/Description
`asChild`	`boolean \| undefined`