Skip to content
SynapseSynapse

AppFrame

AppFrame is the chrome every Synapse app starts with: a fixed header, a scrollable body, and an optional fixed footer that fill the host pane. A body layout (SidebarLayout, ListDetailLayout, or plain content) goes inside AppFrame.Body. It establishes the definite-height ancestor chain the shell needs on render, so it fills the pane instead of collapsing to content height.

import { AppFrame } from "@nimblebrain/synapse/ui";


<AppFrame>
  <AppFrame.Header>…</AppFrame.Header>
  <AppFrame.Body>…</AppFrame.Body>
  <AppFrame.Footer>…</AppFrame.Footer>
</AppFrame>;

Anatomy

Section titled “Anatomy”
  • AppFrame.Header: fixed at the top, doesn’t scroll.
  • AppFrame.Body: the scrollable region. Pass bleed to host a full-bleed layout (a SidebarLayout or board) edge-to-edge, where the panes manage their own scroll; leave it off for plain content, which gets a padded column.
  • AppFrame.Footer: fixed at the bottom, bordered.

The contentWidth knob is a personality lever: reading centers header, body, and footer in a ~760px column (good for conversations or a report), while full uses the whole pane (good for a CRM or dashboard).

Props

Section titled “Props”
Prop Type Default
contentWidth "reading" | "full" "full"

AppFrame.Body

Section titled “AppFrame.Body”
Prop Type Default
bleed boolean false
Section titled “Related”