Retirement pots card
What one person needs at retirement, split into pots, with the drawdown across ages and how each pot gets built.
What Anna needs at retirement
£2,000,000
£500k bridge pot + £1.5m pension pot
Bridge pot (50–57)
Pension pot (50–90)
<RetirementPotsCard data={annaRetirement} />Usage
import { RetirementPotsCard, type RetirementPotsData } from "@reva/ui";Renders the retirement pots tool output (wiring lands with the follow-up agent tool). The card is per-person: it shows the total a person needs at retirement, split into pots — typically a bridge pot that drains from retirement age to pension access age, and a pension pot that accumulates until access and draws down after. Pots stack in the chart in array order, bottom to top, and every money field is a decimal string.
The segmented control focuses one pot: the other bands dim and the focused pot's make-up (for example contributions vs growth) renders beneath the chart as a stacked bar. The All view shows a colour legend with each pot's active age span instead.
Pass data with a stable reference (module scope, state or useMemo). Send one series point per plotted age — ages missing from a pot's series render as 0 — and make sure pension_access_age lands on a plotted age: the x-axis is categorical, so an age between points renders no marker.
Examples
Bridge and pension
The full state: the bridge pot drains to zero at the pension access age while the pension pot keeps compounding, then the pension draws down. The dashed marker flags where the pension unlocks. Focus a pot to dim the other and see how it gets built.
What Anna needs at retirement
£2,000,000
£500k bridge pot + £1.5m pension pot
Bridge pot (50–57)
Pension pot (50–90)
<RetirementPotsCarddata={{ reporting_currency: "GBP", person_name: "Anna", retirement_age: 50, pension_access_age: 57, total_needed: "2000000", pots: [ { key: "bridge", label: "Bridge pot", total: "500000", series, composition }, { key: "pension", label: "Pension pot", total: "1500000", series, composition }, ],}}/>Pension only
One pot, no bridge and no access marker. The segmented control stays because the composition breakdown is still worth focusing into.
What Priya needs at retirement
£900,000
£900k pension pot
Pension pot (60–90)
<RetirementPotsCard data={pensionOnlyRetirement} />No breakdown
Without composition arrays a focused pot shows just its label and total — the chart focus and dimming still work.
What Anna needs at retirement
£2,000,000
£500k bridge pot + £1.5m pension pot
Bridge pot (50–57)
Pension pot (50–90)
<RetirementPotsCard data={noBreakdownRetirement} />A couple
One card per person. Each card owns its focus state and chart gradients, so two cards in one thread never interfere.
What Anna needs at retirement
£2,000,000
£500k bridge pot + £1.5m pension pot
Bridge pot (50–57)
Pension pot (50–90)
What Tom needs at retirement
£1,400,000
£250k bridge pot + £1.2m pension pot
Bridge pot (55–58)
Pension pot (55–90)
<VStack gap={4}> <RetirementPotsCard data={annaRetirement} /> <RetirementPotsCard data={tomRetirement} /></VStack>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | RetirementPotsData | — | The card payload. Stable reference required. |
The data fields:
| Field | Type | Description |
|---|---|---|
reporting_currency | string | ISO currency for every value (e.g. "GBP"). |
person_name | string | Optional. Names the header eyebrow ("What Anna needs at retirement"). |
retirement_age | number | The age the plan retires at. |
pension_access_age | number | Optional. Draws the dashed unlock marker; must land on a plotted age. |
total_needed | string | Headline total, decimal string. |
subtitle | string | Optional. Overrides the computed per-pot split line under the headline. |
pots | RetirementPot[] | The pots, in stacking order bottom to top. |
Each pot:
| Field | Type | Description |
|---|---|---|
key | string | Stable identifier; doubles as the segmented-control value. |
label | string | Display label, e.g. "Bridge pot". |
total | string | The pot's target at retirement, decimal string. |
series | RetirementPotPoint[] | Per-age values: age, value decimal string. One point per plotted age. |
composition | RetirementPotComposition[] | Optional make-up slices: label, value decimal string. |
role | RetirementPotRole | Optional colour role. Defaults by index: accent, primary, then neutral. |
Pot role accepts "primary" | "accent" | "neutral" | "positive" | "negative".