MaturityLadder

stable

Portfolio maturity distribution with bar chart and bucket details including count, amount, yield

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

Maturity Ladder

Total notional: $125.00M

0–30 days18$42.00M5.25%

31–90 days12$35.00M5.40%

91–180 days8$28.00M5.55%

181–365 days5$15.00M5.72%

1–3 years2$5.00M5.95%

Loading demo…

Props

Prop	Type	Default	Description
`buckets`req	`MaturityBucket[]`	—	Maturity time buckets
`totalNotional`req	`number`	—	Total portfolio notional
`currency`	`string`	—	Currency for amounts

bucketsrequired

Type MaturityBucket[]Default —

Maturity time buckets

totalNotionalrequired

Type numberDefault —

Total portfolio notional

currency

Type stringDefault —

Currency for amounts

MobileStacks / Scroll

Ladder chart requires min 320px. Wrap in overflow-x-auto.

Design Rationale

This component was designed to express:

Inline proportional bar for ratio visualization in table cells

High-density data table for treasury positions, risk matrices, and compliance grids

Was this helpful?