Components

Drawer

Bottom-anchored panel powered by vaul. Slide-up mobile pattern with a drag handle. Use Sheet on desktop; Drawer on mobile-adjacent prototypes.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Drawer>
  <DrawerTrigger asChild><Button>Open drawer</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit rule</DrawerTitle>
      <DrawerDescription>Bottom-anchored panel for mobile flows.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Save</Button>
      <DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

When to use

  • Mobile-adjacent prototypes.
  • Contextual actions launched from the bottom on small screens.

When not to use

  • Full desktop shell — use Sheet.
  • Critical decisions — use Dialog.

Usage

Do
  • Keep the drag handle visible.
  • Anchor the primary CTA in the footer.
Don't
  • Don't stack drawers.
  • Don't hide the handle.