AppShell

Outer dark-mode + popover/toaster mount; the chrome a top-level Blazor app sits inside

Interactive-mode

Examples

Default

Header slot

Content slot

Gutters off, no borders, narrow sidebar

Header

Content (consumer styles inside the slot when Gutters=false)

API

The element family below can be composed together. Click an element to jump to its properties.

Element Purpose

AppShell Outermost shell for a top-level Blazor app. Provides the data-dark-mode-target wrapper, the ambient flex layout, and mounts the global Popovers and Toaster primitives once with the consumer-supplied render mode. Consumers do **not** add Popovers/Toaster separately — AppShell owns them. Wrapper-styling: chunks absorb common layout decisions (borders, padding, alignment, widths) so consumers don't write Tailwind in slot content.

Element	Purpose
AppShell	Outermost shell for a top-level Blazor app. Provides the `data-dark-mode-target` wrapper, the ambient flex layout, and mounts the global `Popovers` and `Toaster` primitives once with the consumer-supplied render mode. Consumers do not add `Popovers`/`Toaster` separately — `AppShell` owns them. Wrapper-styling: chunks absorb common layout decisions (borders, padding, alignment, widths) so consumers don't write Tailwind in slot content.

AppShell

Outermost shell for a top-level Blazor app. Provides the data-dark-mode-target wrapper, the ambient flex layout, and mounts the global Popovers and Toaster primitives once with the consumer-supplied render mode. Consumers do **not** add Popovers/Toaster separately — AppShell owns them. Wrapper-styling: chunks absorb common layout decisions (borders, padding, alignment, widths) so consumers don't write Tailwind in slot content.

Property	Type	Description
Header	RenderFragment?	Sticky top bar slot. Renders inside a `<header>` whose styling (border, blur, alignment) is controlled by `Borders`, `HeaderBgFilled`, `HeaderAlignment`, `Gutters`. Strict-shape slot.
Sidebar	RenderFragment?	Left rail slot. Renders inside an `<aside>` whose width / border / fill / padding is controlled by `SidebarWidth`, `Borders`, `SidebarBgFilled`, `Gutters`.
Content	RenderFragment?	Main scrollable content slot. `flex-1 min-h-0 overflow-y-auto` baseline; padding via `Gutters`.
Footer	RenderFragment?	Bottom band slot. Border / fill / padding controlled by `Borders` and `Gutters`.
InteractiveRenderMode	IComponentRenderMode?	Render mode applied to the internally-mounted `Popovers` and `Toaster`. Default: `null` (inherits from consumer's surrounding context).
Borders	bool	Toggles `border-b` on Header, `border-r` on Sidebar, `border-t` on Footer. Default: `true`.
Gutters	bool	Toggles internal padding: Sidebar/Content/Footer get `p-4`; Header content row gets `px-6 gap-4`. Default: `true`.
HeaderAlignment	Alignment	Flex `items-*` value on the Header content row. Default: `Alignment.Center`. Other values: `Start`, `End`, `Stretch`. Shared `Alignment` enum.
SidebarWidth	Size	Sidebar width via the shared `Size` enum (mapped through `SizeClasses.Width`). Default: `Size.Md` (`w-56`). Common values: `Sm` (`w-48`), `Md` (`w-56`), `Lg` (`w-72`).
SidebarBgFilled	bool	Toggles `bg-background` on the Sidebar wrapper. Default: `true`.
HeaderBgFilled	bool	Toggles `bg-background/95 backdrop-blur` on the Header band. Default: `true`.