Prototype Frames

About

A frame that simulates a modal dialog, either overlaying typical page content with a dimmed backdrop and navigation bar, or as a solo centered dialog for spotlight prototyping. The modal dialog includes a header with a title and optional close button, a body area for content, and an optional footer for action buttons. Four size presets are available: small (400px), medium (600px), large (800px), and xlarge (fills the frame with 50px padding on all sides). The body can be made scrollable for longer content while keeping the header and footer fixed. The XL size always has a scrollable body. Behind the modal, placeholder table rows simulate typical page content. The modal visually matches the Breeze UI Modal component styling (rounded corners, shadow, header/body/footer structure) but is rendered inline within the frame boundary rather than using a portal.

Import
import { ModalFrame } from "@/components/frames/ModalFrame";

Usage Guidance

When to use

  • +Prototyping modal dialogs for confirmations, forms, or information displays.
  • +Designing modals that appear over page content with realistic context.
  • +Evaluating different modal sizes for your content requirements.
  • +Presenting modal designs with or without the application chrome.

When not to use

  • −For full-page layouts — use FullPageApplicationFrame instead.
  • −For side panels — use ContextPanelFrame instead.
  • −For isolated component prototypes — use PageBuilderCardFrame instead.
  • −For non-dialog overlays like drawers or popovers — build a custom prototype.

Code Samples

Standard confirmation dialog

A small modal with a confirmation message and cancel/confirm footer buttons. The close button is hidden to require an explicit choice.

<ModalFrame
  title="Delete record?"
  size="small"
  showClose={false}
  footer={
    <div className="flex justify-end gap-2">
      <Button buttonType="transparent" compact>Cancel</Button>
      <Button buttonType="primary" compact>Delete</Button>
    </div>
  }
>
  <p className="text-sm text-gray-600">
    This action cannot be undone. The record and all associated
    data will be permanently removed.
  </p>
</ModalFrame>

Medium form modal

A standard-sized modal containing a form with input fields and save/cancel actions in the footer.

<ModalFrame
  title="Edit Details"
  size="medium"
  footer={
    <div className="flex justify-end gap-2">
      <Button buttonType="transparent" compact>Cancel</Button>
      <Button buttonType="primary" compact>Save</Button>
    </div>
  }
>
  <div className="space-y-3">
    <div>
      <label className="text-xs font-medium text-gray-500 block mb-1">Name</label>
      <input className="w-full border border-gray-300 rounded px-3 py-2 text-sm" />
    </div>
    <div>
      <label className="text-xs font-medium text-gray-500 block mb-1">Description</label>
      <textarea className="w-full border border-gray-300 rounded px-3 py-2 text-sm" rows={3} />
    </div>
  </div>
</ModalFrame>

Large scrollable modal

A large modal with scrollable body content. The header and footer remain fixed while the body scrolls to accommodate longer content.

<ModalFrame
  title="Terms & Conditions"
  size="large"
  scrollable
  footer={
    <div className="flex justify-end gap-2">
      <Button buttonType="transparent" compact>Decline</Button>
      <Button buttonType="primary" compact>Accept</Button>
    </div>
  }
>
  <div className="space-y-4 text-sm text-gray-600">
    <p>Please review the following terms carefully before proceeding.</p>
    <p>Section 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Section 2: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Section 3: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Section 4: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</ModalFrame>

XL full-page modal

An extra-large modal that fills the available space with 50px padding on all sides. The body is always scrollable. Ideal for data-heavy views, complex workflows, or multi-step forms.

<ModalFrame
  title="Data Explorer"
  size="xlarge"
  footer={
    <div className="flex justify-end gap-2">
      <Button buttonType="transparent" compact>Close</Button>
      <Button buttonType="primary" compact>Save Changes</Button>
    </div>
  }
>
  <div className="space-y-4 text-sm text-gray-600">
    <p>This modal fills the viewport with 50px padding on all sides.</p>
    <p>Use it for complex workflows, data tables, or multi-column layouts that need maximum screen real estate.</p>
  </div>
</ModalFrame>

API Reference

PropTypeDefaultDescription
children*React.ReactNode—The prototype content to render inside the modal body. Can be forms, confirmation messages, information displays, or any dialog content.
titlestring"Modal Title"Heading text displayed in the modal header.
size"small" | "medium" | "large" | "xlarge""medium"Dialog size preset. "small" is 400px (confirmations, simple forms), "medium" is 600px (standard forms, content), "large" is 800px (complex forms, data displays), "xlarge" fills the frame with 50px padding on all sides (data-heavy views, complex workflows). XL always has a scrollable body.
showClosebooleantrueShow or hide the close button (X) in the modal header. Set to false for modals that require explicit action (e.g. confirmation dialogs).
footerReact.ReactNode—Optional footer content rendered at the bottom of the modal with a top border. Typically contains cancel/confirm or save/discard buttons.
scrollablebooleanfalseEnable scrollable body with a max-height constraint. The header and footer remain fixed while the body scrolls. Useful for long forms or content.
solobooleanfalseSolo mode — renders just the modal dialog centered on a neutral background without the navigation bar or page content backdrop.
showNavbooleantrueShow or hide the top navigation bar in standard mode. Has no effect when solo is true.
heightstring"1000px"Height of the frame container. Use a fixed value for documentation previews, or "100vh" for full-screen prototypes.
onClose() => void—Handler for the close button. If omitted, the close button is decorative (preventDefault).