ScenarioComparison

stable

Side-by-side comparison of forecast scenarios with baseline highlighting

import { ScenarioComparison } from "@nodus/design-system/finance"

Rate Sensitivity Scenarios

Metric	Base CaseBASELINE	+100bps Shock	-100bps Shock
Net Interest Income	$45,000,000.00	$48,500,000.00 +7.8%	$41,200,000.00 -8.4%
Economic Value	$320,000,000.00	$295,000,000.00 -7.8%	$348,000,000.00 +8.8%

Loading demo…

Props

Prop	Type	Default	Description
`scenarios`req	`Scenario[]`	—	Array of scenario objects
`baselineIndex`	`number`	—	Index of baseline scenario
`locale`	`string`	—	BCP 47 locale override
`label`	`string`	—	Section label

scenariosrequired

Type Scenario[]Default —

Array of scenario objects

baselineIndex

Type numberDefault —

Index of baseline scenario

locale

Type stringDefault —

BCP 47 locale override

label

Type stringDefault —

Section label

MobileStacks / Scroll

Comparison table activates horizontal scroll on narrow viewports.

Design Rationale

This component was designed to express:

Multi-period cash forecast table with row grouping, totals, and loading skeleton

Cash flow waterfall with opening balance, incremental flows, and closing balance

Was this helpful?