KQ-700 · REPAYMENT/ARC

Repayment Arc

The whole cost of a loan — principal plus every scheduled interest charge — drawn as one 240° arc that fills clockwise with what has actually been repaid: principal in cobalt from the start and interest in warn continuing from where the principal ends, both shares animated together on glide. Their sum places the frontier, a marker riding the arc with the next due date just outside it; the date swaps only once the spring has settled, so the label never names a date the arc has not yet reached, and the centre figure counts on glide. Nothing takes focus: it is a role="meter" driven by its props.

KQ-700 · REPAYMENT/ARC

Coldbrook Bank vehicle loan14 of 36 paid

Coldbrook Bank 14 of 36 paid | principal 6,530.96 · interest 1,296.24 | next 12 Dec

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/repayment-arc

Props

total: number; default —; Principal plus every scheduled interest charge; the full arc.
paidPrincipal: number; default —; Principal repaid so far; the cobalt share.
paidInterest: number; default —; Interest paid so far; the warn share.
paidCount: number; default —; Instalments made.
count: number; default —; Instalments in the schedule.
nextDue: string; default —; The next due date in its own words, printed at the frontier.
nextAmount: number; default —; The next instalment, printed under the arc when given.
format: (value: number) => string; default Intl.NumberFormat, two decimals; Formats every amount the arc prints.
label: string; default Repayment; Names the meter; printed above the arc.

Prop	Type	Default	Description
total	number	—	Principal plus every scheduled interest charge; the full arc.
paidPrincipal	number	—	Principal repaid so far; the cobalt share.
paidInterest	number	—	Interest paid so far; the warn share.
paidCount	number	—	Instalments made.
count	number	—	Instalments in the schedule.
nextDue	string	—	The next due date in its own words, printed at the frontier.
nextAmount	number	—	The next instalment, printed under the arc when given.
format	(value: number) => string	Intl.NumberFormat, two decimals	Formats every amount the arc prints.
label	string	Repayment	Names the meter; printed above the arc.