Drawer

A bottom sheet that slides up from the bottom of the viewport. Great for mobile-friendly interactions and supplementary content.

Bottom Drawer

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Move to folder</DrawerTitle>
      <DrawerDescription>
        Select a destination folder for this item.
      </DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p className="text-sm text-muted-foreground">
        Drawer body content goes here.
      </p>
    </div>
  </DrawerContent>
</Drawer>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the drawer.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.

Accessibility

Built on Vaul, which implements focus trapping and restoration and closes on Escape. The backdrop is marked aria-hidden.

Every drawer must have a DrawerTitle. If the title should be visually hidden, wrap it in VisuallyHidden from Radix so the accessible name is still announced.