KQ-708 · GRACE/TIMER

Grace Timer

A grace period as a bar that drains linearly from where it stands to empty, only while running and the tab is visible, with the days remaining stepping down on snap from the tick that crosses each day. Inside the last days the bar and figure turn warn; at zero interest applies. Pay stops the drain where it stands and a PAID seal stamps into the figure's place on recoil. Pay is a real button; the bar is a meter.

KQ-708 · GRACE/TIMER

Fernworks cardGrace perioddays left

Statement $412.60

Grace 15 days left · $412.60

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/grace-timer

Props

days: number; default —; Length of the grace period in days.
daysUsed: number; default 0; Days already elapsed when the timer mounts.
running: boolean; default false; Runs the drain; false holds it where it stands.
secondsPerDay: number; default 1; Real seconds per simulated day.
warnDays: number; default 5; Days remaining at which the bar turns warn.
paid / defaultPaid: boolean; default false; Controlled or initial paid state.
onPaidChange: (paid: boolean) => void; default —; Fires from the Pay press.
onDaysChange: (daysLeft: number) => void; default —; Fires from the tick that crossed into a new day.
onExpire: () => void; default —; Fires from the tick that reached zero.
amount: number; default —; The statement balance the Pay button settles.
format: (value: number) => string; default USD via Intl.NumberFormat; Turns an amount into its printed string.
label: string; default —; Names the timer.

Prop	Type	Default	Description
days	number	—	Length of the grace period in days.
daysUsed	number	0	Days already elapsed when the timer mounts.
running	boolean	false	Runs the drain; false holds it where it stands.
secondsPerDay	number	1	Real seconds per simulated day.
warnDays	number	5	Days remaining at which the bar turns warn.
paid / defaultPaid	boolean	false	Controlled or initial paid state.
onPaidChange	(paid: boolean) => void	—	Fires from the Pay press.
onDaysChange	(daysLeft: number) => void	—	Fires from the tick that crossed into a new day.
onExpire	() => void	—	Fires from the tick that reached zero.
amount	number	—	The statement balance the Pay button settles.
format	(value: number) => string	USD via Intl.NumberFormat	Turns an amount into its printed string.
label	string	—	Names the timer.