KQ-712 · GOAL/TIMELINE

Goal Timeline

A timeline from now to a horizon with a marker planted where the goal is met at the current monthly contribution. Moving the contribution slider slides the marker earlier or later on glide, the filled run stretching behind it on the same spring, while the flag cross-fades to the new month and the months figure rolls in on snap. The thumb is a real slider: Arrow keys step, PageUp and PageDown take ten steps, Home and End jump, and the projection is announced when the slider settles.

KQ-712 · GOAL/TIMELINE

House deposit$8,400 of $20,000

$400 a month29 months

$400 a month · 29 months · Feb 2029

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/goal-timeline

Props

saved: number; default —; Already in the goal.
goal: number; default —; The target amount.
monthly / defaultMonthly: number; default min; Controlled or initial monthly contribution.
onMonthlyChange: (monthly: number) => void; default —; Fires from the pointer or key that moved the slider.
min / max / step: number; default 50 / 1000 / 25; Slider range and step.
start: { year: number; month: number }; default —; The timeline's first month (month 1–12). Seeded, never read from a clock.
horizonMonths: number; default 36; How far the track looks ahead; a goal past it parks the marker at the end.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); Formats the amounts and the slider's value text. The default pins an explicit locale so server and client agree.
label: string; default —; Names the goal; heads the instrument and labels the slider.

Prop	Type	Default	Description
saved	number	—	Already in the goal.
goal	number	—	The target amount.
monthly / defaultMonthly	number	min	Controlled or initial monthly contribution.
onMonthlyChange	(monthly: number) => void	—	Fires from the pointer or key that moved the slider.
min / max / step	number	50 / 1000 / 25	Slider range and step.
start	{ year: number; month: number }	—	The timeline's first month (month 1–12). Seeded, never read from a clock.
horizonMonths	number	36	How far the track looks ahead; a goal past it parks the marker at the end.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })	Formats the amounts and the slider's value text. The default pins an explicit locale so server and client agree.
label	string	—	Names the goal; heads the instrument and labels the slider.