Full Screen Modal

Full screen modal is an immersive takeover of the entire viewport. The background content pushes back and dims while the modal scales up from the center.

#Import

#Example

#Guidelines

#When to use

• For builder or editor experiences that need the whole screen.

#When not to use

• If presenting information or a form, use a dialog instead.
• If showing a detail or edit view alongside the page context, use a drawer instead.

#Props

Name	Default	Description
isOpen	—	boolean Whether the modal is open.
onClose	—	() => void Callback invoked to close the modal.
children	—	ReactNode Modal content.
containerRef	—	RefObject<HTMLElement> Ref to the app container element that receives the push-back effect. Defaults to `document.body.firstElementChild`.
closeOnEsc	true	boolean Close modal on escape key press.