Drawer

A panel that slides out from the edge of the screen. A replacement for dialog on mobile and tablet.

Installation

npm i vaul

Usage

import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"

export function DrawerDemo() {
  return (
    <Drawer>
      <DrawerTrigger>Open</DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <p className="text-center text-sm text-muted-foreground">
            This drawer component uses Vaul behind the scenes.
          </p>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Examples

With Components

Different Positions

Note: The drawer will open from the direction specified. For example, "Top" means the drawer will slide down from the top of the screen.

Props

Component	Props	Description
Drawer	DrawerPrimitive.RootProps shouldScaleBackground?: boolean direction?: 'top' \| 'bottom' \| 'left' \| 'right'	The root component for the drawer. Set `direction` to change the position of the drawer.
DrawerTrigger	DrawerPrimitive.TriggerProps asChild?: boolean	The button that opens the drawer.
DrawerContent	DrawerPrimitive.ContentProps	The container for the drawer content.
DrawerHeader	React.HTMLAttributes<HTMLDivElement>	Contains the title and description of the drawer.
DrawerTitle	DrawerPrimitive.TitleProps	The title of the drawer.
DrawerDescription	DrawerPrimitive.DescriptionProps	The description of the drawer.
DrawerFooter	React.HTMLAttributes<HTMLDivElement>	Used for aligning actions at the bottom of the drawer.
DrawerClose	DrawerPrimitive.CloseProps asChild?: boolean	The button that closes the drawer.