PageContainer Composition
Server-safe page frame inside Container. It presents injected breadcrumb, title, subtitle, extra,
tabs, and body regions; it does not know routes, data, auth, title levels, action behaviour, or tab state.
Usage
Every region is injected. PageContainer chooses none of them — including the heading level, which belongs to the surrounding document.
Projects
The body region is ordinary document flow; the application owns what is in it.
Regions are optional
A frame with only a title is still a frame. Omitted regions collapse rather than leaving a gap.
Billing
No breadcrumb, no subtitle, no actions — nothing reserves space for them.
Container size
containerSize is the existing Container geometry; it changes the measure of the frame and
nothing about its anatomy.
Settings
containerSize="sm"
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| breadcrumb / title / subtitle / extra / tabs / children | ReactNode | — | Optional injected page regions. |
| containerSize | 'sm' | 'md' | 'lg' | 'full' | 'lg' | Existing Container geometry. |
Skeleton
PageContainer.Skeleton preserves the same page-frame anatomy without interactive descendants.
Use breadcrumb, subtitle, extra, and tabs to mirror the visible regions; lines controls
the placeholder body rows and containerSize matches the live frame.
Tokens
--cb-space-*, --cb-fg*, --cb-font-sans, --cb-text-*, --cb-weight-semibold,
--cb-leading-normal, --cb-border-width, --cb-border, and --cb-control-height-*.
Do
Pass the heading level and interactive children that belong to the surrounding application.
Don't
Put routing, fetching, authorization, or page-level state inside PageContainer.