Drawer

A panel that slides out from the edge of the screen.

vaul.emilkowal.ski

Variants

Default

<Drawer>
  <DialogTrigger asChild={true}>
    <Button>
      Open Drawer
    </Button>
  </DialogTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DialogTitle>
        Title
      </DialogTitle>
    </DrawerHeader>
    <div>
      <p>
        Content goes here
      </p>
    </div>
    <DrawerFooter>
      <DialogClose asChild={true}>
        <Button>
          Close
        </Button>
      </DialogClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Right Drawer

<Drawer direction="right">
  <DialogTrigger asChild={true}>
    <Button>
      Open Drawer
    </Button>
  </DialogTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DialogTitle>
        Title
      </DialogTitle>
    </DrawerHeader>
    <div>
      <p>
        Content goes here
      </p>
    </div>
    <DrawerFooter>
      <DialogClose asChild={true}>
        <Button>
          Close
        </Button>
      </DialogClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>