NSFRPanel

stable

Net Stable Funding Ratio panel with ASF/RSF category breakdown and compliance status

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

Net Stable Funding Ratio

COMPLIANT

181.8%

Available Stable Funding

Tier 1 Capital (100%)$120.00M

Stable Deposits (95%)$190.00M

Wholesale Funding >1Y (50%)$40.00M

Total ASF$350.00M

Required Stable Funding

Performing Loans (65%)$162.50M

HQLA Level 1 (0%)$0.00

Corporate Bonds (50%)$30.00M

Total RSF$192.50M

Loading demo…

Props

Prop	Type	Default	Description
`asf`req	`NSFRCategory[]`	—	Available stable funding categories
`rsf`req	`NSFRCategory[]`	—	Required stable funding categories
`minimum`	`number`	—	Regulatory minimum
`currency`	`string`	—	Currency code
`locale`	`string`	—	BCP 47 locale override
`label`	`string`	—	Panel title

asfrequired

Type NSFRCategory[]Default —

Available stable funding categories

rsfrequired

Type NSFRCategory[]Default —

Required stable funding categories

minimum

Type numberDefault —

Regulatory minimum

currency

Type stringDefault —

Currency code

locale

Type stringDefault —

BCP 47 locale override

label

Type stringDefault —

Panel title

MobileStacks / Scroll

NSFR metrics panel collapses to single-column on mobile.

Design Rationale

This component was designed to express:

Liquidity Coverage Ratio dashboard with HQLA, net outflows, and compliance gauge

HQLA tier composition breakdown with stacked bar and tier-level detail

Was this helpful?