CenteredShell
Single centered column for auth, error, or empty-app states
SSR mode
Examples
Md width (default)
Centered content (Md)
Sm width
Centered content (Sm)
Lg width
Centered content (Lg)
Full width, no gutters — edge-to-edge
Edge-to-edge content (no outer padding, no max-width cap)
Full width, with gutters — column inset from edges
Same Full width, but Gutters=true (default) adds p-4 around the column
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| CenteredShell | Centres its ChildContent horizontally and vertically inside its parent. Caps the column width via the shared Size enum so content reads at a comfortable line length on wide viewports. Useful for login screens, full-page error states, marketing-style empty pages, or any single-column layout that should not stretch edge-to-edge. Wrapper-styling: outer padding is controlled by Gutters so consumers do not need an extra wrapping div. |
CenteredShell
Centres its ChildContent horizontally and vertically inside its parent. Caps the column width via the shared Size enum so content reads at a comfortable line length on wide viewports. Useful for login screens, full-page error states, marketing-style empty pages, or any single-column layout that should not stretch edge-to-edge. Wrapper-styling: outer padding is controlled by Gutters so consumers do not need an extra wrapping div.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | The content to centre and width-cap. | |
| MaxWidth | Size | Column width cap. Default: Size.Md (max-w-md, ~28 rem). Other values: Xs3, Xs2, Xs, Sm, Lg, Xl, Xl2–Xl8, Full. Mapped through SizeClasses.MaxWidth. | |
| Gutters | bool | Toggles p-4 on the outer centering wrapper, giving the column breathing room from the viewport edge. Default: true. Set false when the parent already provides padding or when you need edge-to-edge centering. |