DrawerPro

• Mobile-first sheets: filters, options, quick edits and confirmations.

• Desktop forms with many fields: use a dialog or side sheet.

Import it from @/components/ui/drawer after installing.

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Drawer } from "@/components/ui/drawer";

export function SizePicker() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Choose a size</Button>
      <Drawer open={open} onOpenChange={setOpen} title="Choose a size" footer={<Button onClick={() => setOpen(false)}>Done</Button>}>
        …
      </Drawer>
    </>
  );
}

• A modal dialog, labelled and described, with a focus trap and focus return.
• Dragging is optional: Esc, the overlay and your buttons all close it.

• Slides up with a spring; drag down past 120px or flick to dismiss; it resists dragging upward.

• Full width on phones, 512px centered on larger screens; respects the home-indicator safe area.

• Nothing renders while closed.

• Only the handle and header start drags, so the body can scroll normally.