Drawer

A panel that slides in from the edge for secondary flows.

Default

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Export notes</DrawerTitle>
      <DrawerDescription>Download your notes as plain markdown files.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Export</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Sides, height & scrolling

{/* any edge */}
<Drawer direction="right">…</Drawer>

{/* fixed height instead of the default max-height */}
<DrawerContent className="!max-h-none h-[320px]">…</DrawerContent>

{/* long, scrollable body */}
<div className="max-h-56 overflow-y-auto">…</div>

direction opens the drawer from the right, left, top, or bottom (Sides); a fixed h-[320px] replaces the default max-height (Custom height); the changelog body scrolls inside a capped panel (Scrollable Content). For the Responsive Dialog pattern, swap the Drawer for a Dialog above a breakpoint (useMediaQuery) — same trigger and content, Dialog on desktop, Drawer on mobile.

Markdown for agents: /design/drawer.md · spec: /design.md