build69
Sign inGet API key
build69  /  Components  /  Page Structure  /  PageLayout

PageLayout

Full-height page layout patterns for Next.js (App Router). Six live mocks — AppShell (topbar+sidebar+main), StickyHeader, HeaderContentFooter (sticky action bar), SidebarContent (settings/section nav), CenteredColumn (do

View source← Back to catalog

Preview

Live · 6 stories
App ShellOpen ↗
▸Why this is recommendedpage-layoutnextjsapp-routerlayout+9

PageLayout — app shell.

Recommended for+14
  • ✓Starting a new app page or route segment
  • ✓Wiring a Next.js root layout (h-dvh + flex)
  • ✓Picking the right scaffold for settings, inbox, marketing, dashboard, etc.
Tags+6
page-layoutnextjsapp-routerlayouth-dvhh-screensidebartopbarsplit-viewscaffoldfoundationsappshell
Features+4
  • Six full-viewport layout variants
  • Next.js App Router code snippets shown expanded on the docs page
  • Patterns: h-dvh flex column, sticky header, sticky footer, fixed sidebar, split master-detail
  • Each variant rendered with realistic mock chrome (topbar, sidebar, content cards, footer)
Not recommended for−2
  • ✕In-page component composition (compose the real components inside the chosen layout)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "PageLayout" })

Usage

// app/(app)/layout.tsx — copy from the "AppShell" variant
import type { ReactNode } from 'react';
import { Sidebar } from '@/components/sidebar';
import { Topbar } from '@/components/topbar';

export default function AppLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex h-dvh flex-col">
      <Topbar className="h-14 shrink-0 border-b" />
      <div className="flex flex-1 overflow-hidden">
        <Sidebar className="w-64 shrink-0 overflow-y-auto border-r" />
        <main className="flex-1 overflow-y-auto p-6">{children}</main>
      </div>
    </div>
  );
}

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

No documented props — PageLayout is composed rather than configured. See the source for its full signature.

Related

Platform docsAll componentsSource files