Modal

{/* Outside scroll — entire modal scrolls within viewport */}
<ModalContent scrollBehavior="outside">
  <ModalHeader>
    <ModalTitle>Outside Scroll</ModalTitle>
    <ModalDescription>The entire modal scrolls within the viewport.</ModalDescription>
  </ModalHeader>
  <ModalBody>
    <p>Long content here...</p>
  </ModalBody>
</ModalContent>

{/* Inside scroll — only body scrolls; header stays fixed */}
<ModalContent scrollBehavior="inside">
  <ModalHeader>
    <ModalTitle>Inside Scroll</ModalTitle>
    <ModalDescription>Only the body scrolls; header and footer stay fixed.</ModalDescription>
  </ModalHeader>
  <ModalBody>
    <p>Long content here...</p>
  </ModalBody>
</ModalContent>

const [active, setActive] = useState(0)
const navItems = ['General', 'Security', 'Notifications']

<ModalContent size="lg" scrollBehavior="inside" showCloseButton={false}>
  <ModalBody className="p-0 flex min-h-0">
    {/* Left sidebar */}
    <div className="w-48 shrink-0 flex flex-col">
      <div className="p-3">
        <ModalClose asChild>
          <Button variant="ghost" size="md" pressEffect={false} className="w-9 h-9 p-0">
            <X className="icon-sm" />
            <span className="sr-only">Close</span>
          </Button>
        </ModalClose>
      </div>
      <nav className="flex-1 px-2 pb-4 space-y-1">
        {navItems.map((item, i) => (
          <button key={item} onClick={() => setActive(i)}
            className={cn("w-full text-left px-3 py-2 text-md rounded-lg transition-colors",
              active === i
                ? "bg-background-muted text-foreground font-semibold"
                : "text-text-muted hover:text-foreground hover:bg-background-muted"
            )}>
            {item}
          </button>
        ))}
      </nav>
    </div>
    <Divider orientation="vertical" color="muted" className="mx-0 h-auto" />
    {/* Right content */}
    <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
      <div className="px-6 pt-6 pb-4 shrink-0">
        <ModalTitle>{navItems[active]}</ModalTitle>
      </div>
      <div className="flex-1 px-6 pb-6 overflow-y-auto">
        <p className="text-md text-text-muted">Content area...</p>
      </div>
    </div>
  </ModalBody>
</ModalContent>

{/* With close button (default) — X only */}
<ModalContent showCloseButton>
  <ModalHeader>
    <ModalTitle>Title</ModalTitle>
  </ModalHeader>
  <ModalBody>...</ModalBody>
</ModalContent>

{/* Without close button — footer actions provide exit */}
<ModalContent showCloseButton={false}>
  <ModalHeader>
    <ModalTitle>Title</ModalTitle>
  </ModalHeader>
  <ModalBody>...</ModalBody>
  <ModalFooter>
    <ModalClose asChild>
      <Button variant="ghost" size="md" pressEffect={false}>Cancel</Button>
    </ModalClose>
    <Button size="md" pressEffect={false}>Confirm</Button>
  </ModalFooter>
</ModalContent>