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 { Button } from "@heroui/react"
import { useCallback, useRef, useState } from "react"
import { Modal } from "@/components/ui/heroui-modal"
export default function CustomPortal() {
const portalRef = useRef<HTMLDivElement>(null)
const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null)
const setPortalRef = useCallback((node: HTMLDivElement | null) => {
portalRef.current = node
setPortalContainer(node)
}, [])
return (
<div className="flex flex-col gap-4">
<div>
<p className="text-sm">
Render modals inside a custom container instead of <code>document.body</code>
</p>
<p className="text-sm text-muted-foreground">
Apply <code className="rounded px-1 py-0.5 text-xs">transform: translateZ(0)</code> to the
container to create a new stacking context.
</p>
</div>
<div
ref={setPortalRef}
className="relative flex h-[380px] items-center justify-center overflow-hidden rounded bg-muted/20"
style={{ transform: "translate(0)" }}
>
{!!portalContainer && (
<Modal>
<Button>Open Modal</Button>
<Modal.Backdrop className="h-full" UNSTABLE_portalContainer={portalContainer}>
<Modal.Container className="h-full max-h-full">
<Modal.Dialog className="h-full max-h-full sm:max-w-md">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Heading>Custom Portal</Modal.Heading>
</Modal.Header>
<Modal.Body>
<p className="text-sm text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p className="text-sm text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p className="text-sm text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</Modal.Body>
<Modal.Footer>
<Button slot="close" variant="secondary">
Close
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
)}
</div>
</div>
)
}