A consistent page title block with eyebrow, description, metadata, and action slots.

Branded monogram lockup with nav links and actions. Below lg, links and menu actions open in a modal overlay with backdrop; wrap actions in TopNavAction to keep a primary CTA inline next to the menu toggle. TopNavItem accepts an optional icon, shown in dropdown/mobile rows (not the top bar), and an optional onClick — renders the row as a button instead of a link, for actions like sign out (ignored if href is set). Desktop flyout groups (items) are click-to-open and position their panel with Floating UI, anchored directly to the trigger that opened it. Pass mobileMenuSections for labeled row groups appended to the mobile sheet (e.g. an account section) — styled consistently, no hand-rolled dividers needed, and collapsed behind their label by default (same accordion treatment as flyout groups) so several sections don't turn into a wall of rows; set defaultOpen on a section to start it expanded, or collapsible={false} to always show it. Pass userMenu for a single account/user menu rendered from one data structure — a DropdownMenu next to the desktop actions, and the same sections appended to the mobile sheet automatically, so the two can't drift out of sync; set placement: 'start' to render it before other actions instead of after (the default). Pass mobileMenuExtra for anything more custom, injected at the very bottom of the mobile sheet, separated by a divider — consumer controls all markup.

Collapsible sidebar primitive family — SidebarProvider owns expand/collapse state (Cmd/Ctrl+B toggles by default) and exposes it via useSidebar(). Sidebar renders a sticky rail on desktop and a Sheet-based off-canvas panel on mobile — both inherit real focus-trap/Escape handling from Sheet. collapsible="icon" collapses to an icon-only rail; SidebarMenuButton's tooltip prop then shows on hover/focus. DashboardShell is built on this primitive — reach for Sidebar directly when you need a custom shell.

Docs-aligned app shell: sidebar brand lockup, structured nav, context top bar, and main content. The sidebar stays pinned while the content scrolls on lg+ (≥ 4.8.41 — earlier versions scrolled it away: PageShell's overflow-hidden root disabled sticky for all descendants, and the flex row stretched the sidebar to full content height). Use variant="topnav" for the legacy horizontal TopNav layout. Pass showMobileLogo={false} to hide the mobile monogram when the consumer renders its own logo.

Settings pages get section navigation, page header, form surfaces, and footer actions. Pass onNavSelect for client-side section switching.

List and detail pages share page-header structure, actions, filters, empty states, and optional aside columns.

A full-page empty state composition for first-run, no-results, and error pages.

Higher-level sections for marketing and dashboard overview pages.