Modal

{/* Outside scroll — entire modal scrolls within viewport */}
<Modal.Content scrollBehavior="outside">
  <Modal.Header>
    <Modal.Title>Outside Scroll</Modal.Title>
    <Modal.Description>The entire modal scrolls within the viewport.</Modal.Description>
  </Modal.Header>
  <Modal.Body>
    <p>Long content here...</p>
  </Modal.Body>
</Modal.Content>

{/* Inside scroll — only body scrolls; header stays fixed */}
<Modal.Content scrollBehavior="inside">
  <Modal.Header>
    <Modal.Title>Inside Scroll</Modal.Title>
    <Modal.Description>Only the body scrolls; header and footer stay fixed.</Modal.Description>
  </Modal.Header>
  <Modal.Body>
    <p>Long content here...</p>
  </Modal.Body>
</Modal.Content>

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

<Modal.Content size="lg" scrollBehavior="inside" showCloseButton={false}>
  <Modal.Body className="p-0 flex min-h-0">
    {/* Left sidebar */}
    <div className="w-48 shrink-0 flex flex-col">
      <div className="p-3">
        <Modal.Close 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>
        </Modal.Close>
      </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">
        <h2 className="text-lg font-semibold">{navItems[active]}</h2>
      </div>
      <div className="flex-1 px-6 pb-6 overflow-y-auto">
        <p className="text-md text-text-muted">Content area...</p>
      </div>
    </div>
  </Modal.Body>
</Modal.Content>

{/* With close button (default) — X only */}
<Modal.Content showCloseButton>
  <Modal.Header>...</Modal.Header>
  <Modal.Body>...</Modal.Body>
</Modal.Content>

{/* Without close button — footer actions provide exit */}
<Modal.Content showCloseButton={false}>
  <Modal.Header>...</Modal.Header>
  <Modal.Body>...</Modal.Body>
  <Modal.Footer>
    <Modal.Close asChild>
      <Button variant="ghost" size="md" pressEffect={false}>Cancel</Button>
    </Modal.Close>
    <Button size="md" pressEffect={false}>Confirm</Button>
  </Modal.Footer>
</Modal.Content>