Drawer

A mobile-friendly bottom sheet / drawer with swipe-to-dismiss. Touch-optimised with spring physics.

When to use

• Mobile action sheets — contextual actions from the bottom.
• Additional content — supplementary information without leaving the page.
• Mobile navigation — hamburger menu replacement.

When NOT to use

• For desktop-focused modals — use Dialog.
• For side panels — use Sheet.

Import

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from '@mihcm/ui/Drawer';

Basic usage

<Drawer>
  <DrawerTrigger asChild>
    <Button>Open</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>Adjust preferences.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">…body…</div>
    <DrawerFooter>
      <DrawerClose asChild>
        <Button>Done</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Composition

• The drag handle at the top allows swipe-to-dismiss on mobile. It renders automatically.
• DrawerHeader / DrawerFooter are layout helpers — skip them for minimal drawers.
• Nest a Form inside for mobile-friendly editing flows.
• On desktop, prefer Dialog or Sheet over Drawer — bottom sheets feel out of place on wide viewports.

Related

• Dialog — centered modal overlay for desktop.
• Sheet — slide-out side panel from any edge.