KQ-665 · YIELD/CURVE

Yield Curve

Rates plotted against lock length as one Catmull-Rom path that draws itself with pathLength on glide, once, so that afterwards the only thing moving is the marker. Dragging picks the nearest term and the marker travels to it on snap with a guide dropping to the axis, the chosen point lifting off its own curve into a halo while the callout rolls its digits and glides to stay over its node. The plot is a real slider: arrows step a term, Page keys move two, Home and End reach the shortest and longest.

KQ-665 · YIELD/CURVE

Coldbrook Bank · term ladderRate by lock length

30 days365 days

Term 90 d — Rate 4.60% — Earns $227

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/yield-curve

Props

points: YieldPoint[]; default —; The curve: { days, apr }, ascending by days. Two points or more.
value / defaultValue: number; default the middle term; Controlled or initial chosen term, in days.
onValueChange: (days: number) => void; default —; Fires from the pointer or key that moved the marker.
amount: number; default —; Principal; given it, the callout prints what the chosen term earns.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); Formats the earnings figure.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
points	YieldPoint[]	—	The curve: { days, apr }, ascending by days. Two points or more.
value / defaultValue	number	the middle term	Controlled or initial chosen term, in days.
onValueChange	(days: number) => void	—	Fires from the pointer or key that moved the marker.
amount	number	—	Principal; given it, the callout prints what the chosen term earns.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })	Formats the earnings figure.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.