Overlays / Drawer

Drawer

<Drawer />Stable

A bottom-anchored overlay that slides up. Use on mobile-friendly contexts where a Dialog would feel heavy. Built on vaul.

import { Drawer, DrawerTrigger, DrawerContent } from "@/components/upnext";

Variants

<Drawer>
  <DrawerTrigger asChild><Button>Open drawer</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Notes from the staff meeting</DrawerTitle>
    </DrawerHeader>
    …content…
    <DrawerFooter>
      <Button>Mark read</Button>
      <DrawerClose asChild><Button variant="ghost">Close</Button></DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.