App shell

Page Layout

The scrolling page frame: a 3-column grid with a 720px content column (16px gutters on phones), an optional cover, the page header and a table-of-contents rail.

Q4 roadmap

Goals

Ship the redesigned onboarding, the new billing page and the Q4 roadmap review.

Milestones

Design review on Oct 20, beta on Nov 3, general availability on Dec 1.

Usage

  • Use it for a document-like page: one readable column with an optional cover and outline.
  • Use fullWidth for wide content such as a full-page database.
  • Don’t put a second scrolling container around it; the layout scrolls itself.
  • Don’t use it for dashboards with many columns; use Grid / Stack inside a plain container.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/PageLayoutExample.tsx
import { PageLayout, PageCover, PageHeader } from '@krackedui/motion';

export function PageLayoutExample() {
  return (
    <PageLayout
      toc={[{ id: 'goals', label: 'Goals', level: 1 }, { id: 'milestones', label: 'Milestones', level: 2 }]}
      cover={<PageCover src="/covers/roadmap.jpg" />}
      header={<PageHeader title="Q4 roadmap" icon="🗺️" />}
    >
      {/* page blocks */}
    </PageLayout>
  );
}

Examples

No cover, full width

Meeting notes

Goals

Ship the redesigned onboarding, the new billing page and the Q4 roadmap review.

Milestones

Design review on Oct 20, beta on Nov 3, general availability on Dec 1.

TOC rail

Composition

anatomy
<PageLayout cover header toc fullWidth as>   // main (or div); grid 16 | 1fr | 16 → 48 → minmax(96,1fr) | 720 | minmax(96,1fr)
  <PageCover src | children/>              // full row, 30vh ≤ 280, hover: Change cover | Reposition
  <PageHeader icon title description actions controls/>
  children (page body)
  <PageTocRail/>                            // right edge (≥ 1024px); hover lists headings
</PageLayout>

API Reference

PageLayout

Based on <main> (or <div>). Children = page body.

PropTypeDefault
cover
ReactNode
header
ReactNode
fullWidth
boolean
false
toc
TocEntry[]
activeTocId
string
first entry
onTocSelect
(id: string) => void
coverHeight
number
280
hasIcon
boolean
false
scrollerRef
Ref<HTMLDivElement>
as
"main""div"
"main"
variant
"document""app"
"document"

PageCover

Based on <div>.

PropTypeDefault
src
string
position
string
"center 28%"
children
ReactNode
onChangeCover
() => void
onReposition
() => void

PageTocRail

Based on <div> (except onSelect).

PropTypeDefault
entries
TocEntry[]
activeId
string
onSelect
(id: string) => void

Accessibility

  • The frame is a main landmark; pass as="div" when it is not the page’s main content (previews, several pages on screen).
  • Cover buttons appear on hover and on keyboard focus (focus-within).
  • The TOC rail is a "Table of contents" disclosure button (aria-expanded): hover, click, Enter or Space open the heading list, a nav with the same name whose current heading has aria-current="location"; Escape or moving focus away closes it. The rail is hidden under 1024px.
© 2026 Motion. Internal documentation.