KQ-706 · PAYDOWN/PLAN

Paydown Plan

A list of debts and the order to clear them. A two-stop control picks smallest-first or highest-rate-first and the rows reorder with a FLIP layout move on glide, their rank numerals cross-fading in place; a range input sets the extra paid each month, and the projected debt-free date rolls its year on snap while the month fades over and the total interest rolls with it. Arrows move the order control, the range is native.

KQ-706 · PAYDOWN/PLAN

Paydown plan

Extra each month$150.00

1Fernworks card24.9% · min $65.00$2,140.00Sep 2027
2Waylight Pay line18.0% · min $40.00$860.00Nov 2027
3Coldbrook Bank loan6.4% · min $190.00$6,400.00Sep 2028

Debt-freeInterest

Highest rate first · extra $150 · debt-free …

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/paydown-plan

Props

debts: PaydownDebt[]; default —; { id, name, balance, rate, minimum }, rate as an annual percentage.
strategy / defaultStrategy: "smallest" | "rate"; default "smallest"; Controlled or initial order: smallest balance first, or highest rate first.
onStrategyChange: (strategy: PaydownStrategy) => void; default —; Fires from the press that changed the order.
extra / defaultExtra: number; default 0; Controlled or initial extra monthly payment on top of the minimums.
onExtraChange: (extra: number) => void; default —; Fires from the range input's change event.
maxExtra: number; default 500; Top of the extra-payment range.
step: number; default 25; Range step.
start: { year: number; month: number }; default —; The first payment's month (1 to 12); passed explicitly so the render never reads the clock.
onProjectionChange: (projection: PaydownProjection) => void; default —; Fires from the effect that observed a changed plan, with months, interest, the payoff month and each debt's clearing month.
format: (value: number) => string; default USD via Intl.NumberFormat; Turns an amount into its printed string.
label: string; default —; Names the plan for assistive technology.

Prop	Type	Default	Description
debts	PaydownDebt[]	—	{ id, name, balance, rate, minimum }, rate as an annual percentage.
strategy / defaultStrategy	"smallest" \| "rate"	"smallest"	Controlled or initial order: smallest balance first, or highest rate first.
onStrategyChange	(strategy: PaydownStrategy) => void	—	Fires from the press that changed the order.
extra / defaultExtra	number	0	Controlled or initial extra monthly payment on top of the minimums.
onExtraChange	(extra: number) => void	—	Fires from the range input's change event.
maxExtra	number	500	Top of the extra-payment range.
step	number	25	Range step.
start	{ year: number; month: number }	—	The first payment's month (1 to 12); passed explicitly so the render never reads the clock.
onProjectionChange	(projection: PaydownProjection) => void	—	Fires from the effect that observed a changed plan, with months, interest, the payoff month and each debt's clearing month.
format	(value: number) => string	USD via Intl.NumberFormat	Turns an amount into its printed string.
label	string	—	Names the plan for assistive technology.