Page
Page chrome, titles, and section spacing. Export as Page.Container and Page.Section.
Default
Title only — spacing diagram for header vs content.
Page header (title + nav)
Page content —
--space-12 gap aboveActions + nav
Header actions and a YearNav row under the title.
Accounts variant
variant="accounts" for BrowseShell routes.
Page.Section
Holdings
Developer
import { Page } from "@financial-tracking/design-system"Page.Container
Renders a <main> with fixed spacing: --space-12 between header and content, --space-5 between title and nav. variant="accounts" sets data-browse-page for BrowseShell layouts.
| Prop | Type | Default |
|---|---|---|
titlePage h1 using --text-large-title. | string | "" |
actionsRight of the title in the page header. | ReactNode | — |
navBelow the title row; typically YearNav. | ReactNode | — |
fullWidthRemoves the max-width constraint on main. | boolean | false |
variantaccounts pairs with BrowseShell (data-browse-page). | "default" | "accounts" | "default" |
childrenRequired. Page body. | ReactNode | — |
Page.Section
| Prop | Type | Default |
|---|---|---|
title | string | — |
asHeading level; also controls section gap. | "h2" | "h3" | "h4" | "h3" |
actionRight-aligned control in the section head. | ReactNode | — |
id | string | — |
childrenRequired. | ReactNode | — |