Components / Fullscreen Modal

Fullscreen Modal

A full-viewport takeover for creative builders and editors: work that needs the whole screen, not a panel. Portals to document.body with a sticky BrandLogo header, Escape handling, and body scroll lock.

import { FullscreenModal } from '@layers/ui/fullscreen-modal'

Rendered stock

House rules

  • The header is fixed: BrandLogo, the title (with an optional "/ subtitle" segment), and the outline X. Content renders below and scrolls.
  • Escape and the X both close via onClose; pass onEscape only when Escape needs different handling, like a confirm-discard prompt.
  • hasFooter (default true) pads the scroll region 72px for a fixed footer the consumer renders; pass false when there is none.
  • Mount it conditionally on open state; it has no built-in trigger or open prop.
  • Focused small tasks stay in Dialog and inspectors in WindowSheet; this is for builder-scale work only.

See also