KQ-687 · DUNNING/STEPS

Dunning Steps

A vertical rail of reminder emails that escalate. Sent steps are stamped with a tick that lands on recoil, the next step wears a ring that drains linearly across intervalMs while the rail segment leading to it fills at the same rate, and when the ring runs out the send is reported and the next ring begins. Pause freezes the rail where it stands, with the Paused word arriving on snap, and Resume continues from the remainder; the clock runs only while running is true and stops while the tab is hidden.

KQ-687 · DUNNING/STEPS

Invoice 2041 · reminders

Friendly reminderNext
Email · Day 3
Second noticeUpcoming
Email · Day 7
Final noticeUpcoming
Email and letter · Day 14
Service holdUpcoming
Account · Day 21

idle · 0 of 4 sent

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/dunning-steps

Props

steps: DunningStep[]; default —; Each step carries an id, a title, an optional detail line and the day after the due date it goes out.
sent / defaultSent: number; default 0; Controlled or initial count of steps that have gone out; onSentChange fires from the countdown's completion, and onStepSent(index, step) alongside it.
running: boolean; default false; The clock. Only a prop or a host's button starts it; while false the ring shows full.
paused / defaultPaused: boolean; default false; Controlled or initial pause; onPausedChange fires from the Pause or Resume press.
intervalMs: number; default 4000; Milliseconds each ring takes to drain.
label: string; default "Reminders"; Heading and the list's accessible name.
pauseLabel / resumeLabel: string; default —; Copy on the pause control; default Pause and Resume.

Prop	Type	Default	Description
steps	DunningStep[]	—	Each step carries an id, a title, an optional detail line and the day after the due date it goes out.
sent / defaultSent	number	0	Controlled or initial count of steps that have gone out; onSentChange fires from the countdown's completion, and onStepSent(index, step) alongside it.
running	boolean	false	The clock. Only a prop or a host's button starts it; while false the ring shows full.
paused / defaultPaused	boolean	false	Controlled or initial pause; onPausedChange fires from the Pause or Resume press.
intervalMs	number	4000	Milliseconds each ring takes to drain.
label	string	"Reminders"	Heading and the list's accessible name.
pauseLabel / resumeLabel	string	—	Copy on the pause control; default Pause and Resume.