KQ-703 · APR/COMPARE

APR Compare

Two loan offers as two cards in one row, each reading its lender, its APR, the monthly payment it implies for the amount being borrowed, and a cost bar. The APR and monthly figures are odometer columns that roll on snap when the amount or the quotes change; each cost bar is principal in cobalt plus interest in warn, scaled against the dearer offer's total and settling on glide, and the cheaper card says so in words. Picking an offer lifts it a nudge on snap with a raised shadow and dims the other by opacity; the cards are a radio group where the arrows move the pick, Home and End jump, and Space or Enter picks.

KQ-703 · APR/COMPARE

Fieldline LoansBorrowing 10,000.00

Fieldline Loans 10,000.00 | nothing picked

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/apr-compare

Props

offers: [AprOffer, AprOffer]; default —; The two offers, left and right: { id, lender, apr, term, fee? }.
amount: number; default —; The principal both offers are costed against.
value / defaultValue: string; default —; Controlled or initial picked offer id; nothing picked when omitted.
onValueChange: (id: string) => void; default —; Fires from the click or key that picked an offer.
format: (value: number) => string; default Intl.NumberFormat, two decimals; Formats every amount the cards print.
label: string; default Offers; Names the group; printed above the cards.

Prop	Type	Default	Description
offers	[AprOffer, AprOffer]	—	The two offers, left and right: { id, lender, apr, term, fee? }.
amount	number	—	The principal both offers are costed against.
value / defaultValue	string	—	Controlled or initial picked offer id; nothing picked when omitted.
onValueChange	(id: string) => void	—	Fires from the click or key that picked an offer.
format	(value: number) => string	Intl.NumberFormat, two decimals	Formats every amount the cards print.
label	string	Offers	Names the group; printed above the cards.