Components
Loading preview...
HeroUI v3 Modal — compound dialog/overlay with placements, backdrops, sizes, dismiss behavior, scroll behavior, controlled state and forms.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-modal"use client"
import { Info } from "lucide-react"
import { Button } from "@heroui/react"
import { Modal } from "@/components/ui/heroui-modal"
export default function DismissBehavior() {
return (
<div className="flex max-w-sm flex-col gap-6">
<div className="flex flex-col gap-2">
<h3 className="text-lg font-semibold">isDismissable</h3>
<p className="text-sm text-muted-foreground">
Controls whether the modal can be dismissed by clicking the overlay backdrop. Defaults to{" "}
<code>true</code>. Set to <code>false</code> to require explicit close action.
</p>
<Modal>
<Button variant="secondary">Open Modal</Button>
<Modal.Backdrop isDismissable={false}>
<Modal.Container>
<Modal.Dialog className="sm:max-w-[360px]">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Icon className="bg-default text-foreground">
<Info className="size-5" />
</Modal.Icon>
<Modal.Heading>isDismissable = false</Modal.Heading>
<p className="text-sm leading-5 text-muted-foreground">
Clicking the backdrop won't close this modal
</p>
</Modal.Header>
<Modal.Body>
<p>
Try clicking outside this modal on the overlay - it won't close. You must use
the close button or press ESC to dismiss it.
</p>
</Modal.Body>
<Modal.Footer>
<Button className="w-full" slot="close">
Close
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
</div>
<div className="flex flex-col gap-2">
<h3 className="text-lg font-semibold">isKeyboardDismissDisabled</h3>
<p className="text-sm text-muted-foreground">
Controls whether the ESC key can dismiss the modal. When set to <code>true</code>, the ESC
key will be disabled and users must use explicit close actions.
</p>
<Modal>
<Button variant="secondary">Open Modal</Button>
<Modal.Backdrop isKeyboardDismissDisabled>
<Modal.Container>
<Modal.Dialog className="sm:max-w-[360px]">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Icon className="bg-default text-foreground">
<Info className="size-5" />
</Modal.Icon>
<Modal.Heading>isKeyboardDismissDisabled = true</Modal.Heading>
<p className="text-sm leading-5 text-muted-foreground">ESC key is disabled</p>
</Modal.Header>
<Modal.Body>
<p>
Press ESC - nothing happens. You must use the close button or click the overlay
backdrop to dismiss this modal.
</p>
</Modal.Body>
<Modal.Footer>
<Button className="w-full" slot="close">
Close
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
</div>
</div>
)
}