Component library

Showing 4 components in the finance kit.

Dashboard

<FinanceOverviewCard>

financeStatsChartDashboard

Two-column financial headline: left block (title, date range, total revenue with optional delta and footnote), right block (product condition headline, optional trend pill, year selector, multi-series monotone area chart), plus a three-column footer row for supporting metrics.

When to use: Use for executive-style revenue or adoption snapshots in report readouts. Pass `chartMonths` and aligned `chartSeries[].values`; include at least one series (empty shows a muted placeholder). Keep series count to 2–4 for clarity. Footer `stats` should contain exactly three items.

Preview

Financial income

1 Aug 2025 – 1 Nov 2025

Total revenue+9.78%

£8,240.00

Increased 15% from last month

Product condition

75%2.8%

Selling product

£335,000

Followers

1,500

Campaign

560

Prop	Type	Notes
dateRange	string	Required. Human-readable range under the income title.Example: `1 Aug 2025 – 1 Nov 2025`
totalRevenueValue	string	Required. Large headline currency string.Example: `£8,240.00`
incomeTitle	string	Optional. Default: `"Financial income"`. Left column title.
totalRevenueLabel	string	Optional. Default: `"Total revenue"`. Label above the headline figure.
totalRevenueDelta	string	Optional. Optional percentage chip; leading + uses success colour, leading − uses error.
totalRevenueFootnote	string	Optional. Muted line under the revenue figure.
conditionValue	string	Required. Large headline next to the chart header.Example: `75%`
conditionTitle	string	Optional. Default: `"Product condition"`. Muted label above the condition value.
conditionBadgeText	string	Optional. Pill text beside the condition value.Example: `2.8%`
conditionBadgeTrend	"up" \| "down"	Optional. Default: `down`. Arrow direction inside the pill.Values: up, down
years	string[]	Optional. Default: `["2025"]`. Year `<select>` options.
chartMonths	string[]	Required. X-axis labels in order (e.g. Jan … Jul).
chartSeries	{ name: string; values: number[]; colorKey: "brand"\|"sky"\|"slate" }[]	Required. One or more series; each `values` array must match `chartMonths` length. If empty, a muted placeholder is shown instead of the chart.
stats	{ label: string; value: string; labelTone?: "brand"\|"sky"\|"emerald" }[]	Required. Exactly three footer metrics.

Examples

<FinanceOverviewCard
    dateRange="1 Aug 2025 – 1 Nov 2025"
    totalRevenueDelta="+9.78%"
    totalRevenueValue="£8,240.00"
    totalRevenueFootnote="Increased 15% from last month"
    conditionValue="75%"
    conditionBadgeText="2.8%"
    years={["2024", "2025", "2026"]}
    chartMonths={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
    chartSeries={[
        { name: "Series A", values: [1200, 1800, 2200, 2600, 3000, 3400, 3800], colorKey: "sky" },
        { name: "Series B", values: [800, 1100, 1400, 1700, 2100, 2500, 2900], colorKey: "brand" },
        { name: "Series C", values: [400, 500, 600, 700, 800, 900, 1000], colorKey: "slate" }
    ]}
    stats={[
        { label: "Selling product", value: "£335,000", labelTone: "sky" },
        { label: "Followers", value: "1,500", labelTone: "sky" },
        { label: "Campaign", value: "560", labelTone: "emerald" }
    ]}
/>

<AllocationDriftChart>

financeChartDataDashboard

Current vs target allocation table with drift, tolerance band status (in band / overweight / underweight), and inline weight bars.

When to use: Use in portfolio monitoring or rebalancing reports to show how each sleeve drifts from strategic targets. Pass weights as numbers (typically percent). Set `tolerance` per row when bands differ by asset class.

Often with: ComparisonBarUsageDonutCardSimpleDataTable

Preview

Strategic allocation drift

Tolerance band ±1% unless noted

Asset class	Current	Target	Drift	Status
Global equities	42.3%	40.0%	+2.3%	Overweight
Investment grade credit	24.1%	25.0%	-0.9%	In band
Private markets	18.6%	20.0%	-1.4%	In band
Cash	8.2%	10.0%	-1.8%	Underweight
Alternatives	6.8%	5.0%	+1.8%	Overweight

Current weight Target weight

Prop	Type	Notes
title	string	Optional. Chart heading.
description	string	Optional. Muted subheading.
rows	{ label: string; current: number; target: number; tolerance?: number }[]	Required. One row per asset class or sleeve. `tolerance` defaults to 1 (same unit as weights).
unit	string	Optional. Default: `"%"`. Suffix for weight and drift columns.

Examples

<AllocationDriftChart
  title="Strategic allocation drift"
  description="Tolerance band ±1% unless noted"
  rows={[
    { label: "Global equities", current: 42.3, target: 40, tolerance: 1 },
    { label: "Investment grade credit", current: 24.1, target: 25, tolerance: 1 },
    { label: "Private markets", current: 18.6, target: 20, tolerance: 2 },
    { label: "Cash", current: 8.2, target: 10, tolerance: 1 },
    { label: "Alternatives", current: 6.8, target: 5, tolerance: 1 }
  ]}
/>

<RebalanceTradeList>

financeDataListDashboard

Ordered list of proposed rebalance trades with buy/sell/hold chips, formatted amounts, optional weight before/after, and optional turnover footer.

When to use: Use after an allocation drift review to show the concrete trades required to return to target. Keep amounts pre-formatted strings (currency or % of NAV).

Often with: AllocationDriftChartSimpleDataTableDataTable

Preview

Proposed rebalance trades

To restore policy weights as of 31 May 2026

Sell
MSCI World ETF
Trim overweight global equity sleeve
£420,000
22.1% → 20.0%
Buy
Sterling IG credit fund
£280,000
23.4% → 25.0%
Hold
Private equity co-invest
Within tolerance; no trade required
—

Estimated turnover3.2% of NAV

Prop	Type	Notes
title	string	Optional. Section heading.
description	string	Optional. Muted subheading.
trades	{ asset: string; action: "buy" \| "sell" \| "hold"; amount: string; weightBefore?: string; weightAfter?: string; note?: string }[]	Required. Proposed trades in execution order.
turnoverLabel	string	Optional. Footer label, e.g. "Estimated turnover".
turnoverValue	string	Optional. Footer value; shown only when both turnover props are set.

Examples

<RebalanceTradeList
  title="Proposed rebalance trades"
  description="To restore policy weights as of 31 May 2026"
  trades={[
    { asset: "MSCI World ETF", action: "sell", amount: "£420,000", weightBefore: "22.1%", weightAfter: "20.0%", note: "Trim overweight global equity sleeve" },
    { asset: "Sterling IG credit fund", action: "buy", amount: "£280,000", weightBefore: "23.4%", weightAfter: "25.0%" },
    { asset: "Private equity co-invest", action: "hold", amount: "—", note: "Within tolerance; no trade required" }
  ]}
  turnoverLabel="Estimated turnover"
  turnoverValue="3.2% of NAV"
/>

<PortfolioSummaryCard>

financeStatsDataDashboard

Headline portfolio card: NAV or AUM with optional delta pill and a grid of supporting metrics (returns, volatility, tracking error, cash, etc.).

When to use: Use at the top of a portfolio or rebalancing report for the headline snapshot. Pair with `<AllocationDriftChart>` and `<RebalanceTradeList>` in the sections below.

Often with: KPIKPIGridFinanceOverviewCardAnalyticsCard

Preview

Balanced growth portfolio

As of 31 May 2026

NAV

£24.6m

+1.8% MTD

YTD return

+4.2%

Volatility (1y)

9.1%

Tracking error

42 bps

Cash

8.2%

Prop	Type	Notes
title	string	Optional. Default: `"Portfolio summary"`. Card heading.
asOf	string	Optional. Valuation date label.
navLabel	string	Optional. Default: `"NAV"`. Label above the headline figure.
navValue	string	Required. Headline NAV or AUM (include currency).
navDelta	string	Optional. Optional change pill, e.g. "+1.8% MTD".
navDeltaTone	"up" \| "down" \| "flat"	Optional. Default: `up`. Colours the delta pill.Values: up, down, flat
metrics	{ label: string; value: string; tone?: "up" \| "down" \| "flat" }[]	Optional. Supporting metrics in a responsive grid (typically 3–4 items).

Examples

<PortfolioSummaryCard
  title="Balanced growth portfolio"
  asOf="31 May 2026"
  navValue="£24.6m"
  navDelta="+1.8% MTD"
  navDeltaTone="up"
  metrics={[
    { label: "YTD return", value: "+4.2%", tone: "up" },
    { label: "Volatility (1y)", value: "9.1%" },
    { label: "Tracking error", value: "42 bps" },
    { label: "Cash", value: "8.2%" }
  ]}
/>