PageShell
In-app page envelope sitting inside AppShell.Content
SSR mode
Examples
Aside on right (default)
Header
Body
Aside on left
Header
Body
No aside
Header
Body fills remaining width
No borders, wide aside
Header (no borders)
Body
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| PageShell | In-app page envelope. Sits inside AppShell.Content (or directly inside a Blazor host page) and arranges a header band, scrollable body, optional aside rail, and optional footer band into one composable surface. Wrapper-styling: chunk absorbs common layout decisions (borders, padding, alignment, aside width and fill) so consumers don't write Tailwind in slot content. |
PageShell
In-app page envelope. Sits inside AppShell.Content (or directly inside a Blazor host page) and arranges a header band, scrollable body, optional aside rail, and optional footer band into one composable surface. Wrapper-styling: chunk absorbs common layout decisions (borders, padding, alignment, aside width and fill) so consumers don't write Tailwind in slot content.
| Property | Type | Required | Description |
|---|---|---|---|
| Header | RenderFragment? | Top band slot. Renders inside a flex-shrink-0 wrapper whose border / alignment / padding is controlled by Borders, HeaderAlignment, Gutters. Strict-shape slot. | |
| Body | RenderFragment? | Main scrollable area. flex-1 min-w-0 overflow-y-auto baseline; padding via Gutters. | |
| Aside | RenderFragment? | Side rail slot. Width / fill / border / padding controlled by AsideWidth, AsideBgFilled, Borders, Gutters. Hidden when AsidePlacement = Placement.None. | |
| Footer | RenderFragment? | Bottom band slot. Border / padding via Borders and Gutters. | |
| AsidePlacement | Placement | Where the Aside renders. Default: Placement.Right. Other values: Left, None. Shared Placement enum. | |
| Borders | bool | Toggles border-b on Header, border-l/r on Aside (matching AsidePlacement), border-t on Footer. Default: true. | |
| Gutters | bool | Toggles p-4 inside each region wrapper. Default: false — consumers style inside slots if Gutters=false. | |
| HeaderAlignment | Alignment | Flex items-* value on the Header content row. Default: Alignment.Center. Shared Alignment enum. | |
| AsideWidth | Size | Aside fixed width via the shared Size enum (mapped through SizeClasses.Width). Default: Size.Sm (w-48). Common values: Sm (w-48), Md (w-56), Lg (w-72). | |
| AsideBgFilled | bool | Toggles bg-background on the Aside wrapper. Default: true. |