Drawer

Mobile-first bottom sheet.

Default

Bottom-docked panel, ideal for mobile flows.

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Create team</DrawerTitle>
      <DrawerDescription>Choose a name and invite members.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Create</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>