Components
Components
Small pieces that compose into a native-feeling shell. Structure components frame the page; navigation components move people through it.
Structure
The frame of every page: the shell itself, the content column, and the insets around device hardware.
AppShellRoot wrapper: shell context, safe-area orchestration, and automatic placement of Header and docked Sidebar children.ContentHeader & BreadcrumbsThe heading block of a workspace screen: router-aware breadcrumb trail, title, subtitle, and actions.ContentThe main region — a semantic <main> that fills the remaining shell space.SafeAreaPads any region by the device safe-area insets (notch, home indicator), edge by edge.
Search & identity
The two things almost every app puts in its chrome: a way to search and the signed-in user. Every one of them works standalone — outside a Header, outside the shell — and every layer can be customized or replaced.
SearchFieldThe search input, solved once: a rounded pill or an edge-to-edge bar, theme-aware inside any Header.SearchModalA full search overlay — sheet on phones, command palette on desktop — triggered from any SearchField, with optional query hand-off.UserMenu & AvatarThe signed-in user's corner: an avatar trigger opening an account dropdown, with a standalone Avatar underneath.NotificationsMenuThe bell next to the avatar: an unread badge and a notification dropdown that coexists with the UserMenu instead of fighting it.