About

A frame that simulates a right-side context panel alongside the main page content, sitting below the Skedulo navigation bar. The panel supports two display modes: push (shifts the page content to the left) and float (overlays the page content with a dimmed background). The panel header includes an optional link (e.g. "View details" or "View JOB-123"), a heading, optional subtitle text, and a close button. The panel body is scrollable and designed for accordion content sections containing field name/value pairs. An optional footer can hold action buttons. Behind the panel, placeholder list rows simulate the typical page content that the panel sits alongside. Use the PanelSection component for collapsible accordion sections and PanelField for label/value pairs within sections.

Import

import { ContextPanelFrame, PanelSection, PanelField } from "@/components/frames/ContextPanelFrame";

Usage Guidance

When to use

+Prototyping side panels for viewing or editing record details.
+Designing panels that appear when clicking a row in a list or table.
+Evaluating push vs overlay panel behaviour for your use case.
+Presenting panel designs with realistic page content context.

When not to use

−For full-page layouts — use FullPageApplicationFrame instead.
−For isolated component prototypes — use PageBuilderCardFrame instead.
−For admin or settings pages — use AdminFrame instead.
−For modal dialogs — use the Modal component directly.

Code Samples

Push mode with accordion sections

A context panel in push mode showing accordion content sections with field name/value pairs. The page content is shifted left.

<ContextPanelFrame
  panelTitle="Appointment"
  panelSubtitle="Mon 14 Oct, 8:00 AM — 10:00 AM"
  panelLink="View JOB-0042"
  mode="push"
>
  <PanelSection title="Details" defaultOpen={true}>
    <dl className="space-y-1">
      <PanelField label="Type">Installation</PanelField>
      <PanelField label="Status">Confirmed</PanelField>
      <PanelField label="Location">123 Main St, Brisbane</PanelField>
    </dl>
  </PanelSection>
  <PanelSection title="Resources" defaultOpen={false}>
    <dl className="space-y-1">
      <PanelField label="Assigned">Jane Smith</PanelField>
    </dl>
  </PanelSection>
</ContextPanelFrame>

Float mode with footer actions

A context panel in float mode overlaying the page content with a dimmed background. Includes save/cancel footer buttons.

<ContextPanelFrame
  panelTitle="Edit Details"
  mode="float"
  footer={
    <div className="flex justify-end gap-2">
      <Button buttonType="transparent" compact>Cancel</Button>
      <Button buttonType="primary" compact>Save</Button>
    </div>
  }
>
  <PanelSection title="General" defaultOpen={true}>
    <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>
  </PanelSection>
</ContextPanelFrame>

Minimal panel (no link, no subtitle)

A stripped-down context panel with just a heading and close button in the header.

<ContextPanelFrame
  panelTitle="Details"
  mode="push"
>
  <PanelSection title="Information" defaultOpen={true}>
    <dl className="space-y-1">
      <PanelField label="Field name">Value</PanelField>
      <PanelField label="Field name">Value</PanelField>
    </dl>
  </PanelSection>
</ContextPanelFrame>

API Reference

Prop	Type	Default	Description
children*	React.ReactNode	—	The prototype content to render inside the panel body. Typically PanelSection components with PanelField children.
panelTitle	string	"Heading"	Heading text displayed in the panel header.
panelSubtitle	string	—	Optional subtitle shown below the heading in the panel header.
panelLink	string	—	Optional link text shown above the heading (e.g. "View details", "View JOB-123"). Renders with an external link icon.
mode	"push" \| "float"	"push"	Panel display mode. "push" shifts the page content to the left to make room. "float" overlays the panel on top of the page content with a dimmed background.
width	string	"400px"	Width of the context panel. Common values: "360px" (compact), "400px" (standard), "480px" (wide).
showNav	boolean	true	Show or hide the top navigation bar. Set to false when prototyping the panel in isolation.
footer	React.ReactNode	—	Optional footer content rendered at the bottom of the panel with a top border. Typically contains save/cancel buttons.
height	string	"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).