KQ-704 · AMORTISE/STACK

Amortise Stack

A loan as one stacked bar per payment, interest over principal, whose boundary slides down period by period. The bars rise on glide in a cascade; scrubbing across the chart moves a cursor on snap and the split beneath rolls its digits on snap while a ratio bar re-proportions on glide. It is a slider: Left and Right step a period, Home and End jump, Page keys move a year.

KQ-704 · AMORTISE/STACK

Coldbrook Bank loanPeriod 12 of 36

Interest

Principal

Balance

InterestPrincipal$375.48 / mo

Period 12 of 36 · $12,000.00 at 7.9%

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/amortise-stack

Props

principal: number; default —; Amount borrowed, in major units.
rate: number; default —; Annual interest rate as a percentage.
periods: number; default —; Number of monthly payments; one bar each.
value / defaultValue: number; default 0; Controlled or initial period index, 0-based.
onValueChange: (period: number, split: AmortiseSplit) => void; default —; Fires from the pointer or key event that moved the cursor, with that period's interest, principal, balance and payment.
format: (value: number) => string; default USD via Intl.NumberFormat; Turns an amount into its printed string.
label: string; default —; Names the chart for assistive technology.

Prop	Type	Default	Description
principal	number	—	Amount borrowed, in major units.
rate	number	—	Annual interest rate as a percentage.
periods	number	—	Number of monthly payments; one bar each.
value / defaultValue	number	0	Controlled or initial period index, 0-based.
onValueChange	(period: number, split: AmortiseSplit) => void	—	Fires from the pointer or key event that moved the cursor, with that period's interest, principal, balance and payment.
format	(value: number) => string	USD via Intl.NumberFormat	Turns an amount into its printed string.
label	string	—	Names the chart for assistive technology.