Browse Shell
Two-pane master/detail shell. Pair with Page.Container variant="accounts". mobileActivePane switches list ↔ detail at ≤ --bp-md.
Default width
420px sidebar — Accounts-style rail.
Detail pane — default sidebar width
Narrow
sidebarWidth="narrow" — Budget month rail.
Detail pane — narrow sidebar
Detail motion
detailMotionKey crossfades the detail pane.
Detail for January
Developer
import { BrowseShell } from "@financial-tracking/design-system"API reference
| Prop | Type | Default |
|---|---|---|
sidebarRequired. Left master pane. | ReactNode | — |
childrenRequired. Detail / main content. | ReactNode | — |
sidebarWidthdefault 420px (Accounts); narrow 280px (Budget rail). | "default" | "narrow" | "default" |
detailMotionKeyWhen set, crossfades detail on key change. | string | — |
mobileActivePaneOn ≤768px, show only this pane. Omit to stack panes. | "sidebar" | "detail" | — |