KQ-683 · RETRY/SCHEDULE

Retry Schedule

A failed charge and the plan for trying it again: spent attempts are struck dots, the next one is ringed and breathing on drift, and the connector into it is the countdown made visible, filling at a linear rate while the mm:ss beside it ticks from an interval that stops when the tab is hidden and holds while an attempt is in flight. Retry now fires the attempt early from the press, and a settled attempt lands — a failure strikes its dot on flick, a success draws its tick on flick and lands the dot on recoil, the one place two bounces are earned. The schedule is an ordered list whose items carry sentences, so the drawn rail stays decorative and the countdown sits in an aria-live="off" timer that is queried rather than announced every second.

KQ-683 · RETRY/SCHEDULE

Invoice WP-1180$86.40

Payment failed

Insufficient funds

Coldbrook Bank ·· 4417

Attempt 1, Now, failed
Attempt 2, +2h, next
Attempt 3, +1d, scheduled
Attempt 4, +3d, scheduled

Attempt 2/4 · waiting · next in 00:45

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/retry-schedule

Props

attempts: RetryAttempt[]; default —; The schedule: id, label and status of "failed", "pending" or "succeeded". The first pending attempt is the next one.
waitSeconds: number; default 300; Seconds until the next attempt; the countdown and the connector fill run across it.
amount: number; default —; The amount that failed, in major units.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Turns the amount into its printed string. The default pins an explicit locale so server and client agree.
reason / method: string; default "Card declined"; The decline line and the quiet caption naming the method that failed.
running: boolean; default true; Runs the countdown. It also stops while the document is hidden or while busy.
busy: boolean; default false; The attempt is in flight: the button reads Trying, its ring spins, and the countdown holds.
onRetryNow: () => void; default —; Fires from the press on Retry now.
onElapse: () => void; default —; Fires from the interval when the wait reaches zero, so the host can run the attempt.
onTick: (secondsLeft: number) => void; default —; Fires once a second from the interval with the seconds left.
label: string; default "Retry schedule"; Names the schedule for assistive technology.

Prop	Type	Default	Description
attempts	RetryAttempt[]	—	The schedule: id, label and status of "failed", "pending" or "succeeded". The first pending attempt is the next one.
waitSeconds	number	300	Seconds until the next attempt; the countdown and the connector fill run across it.
amount	number	—	The amount that failed, in major units.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Turns the amount into its printed string. The default pins an explicit locale so server and client agree.
reason / method	string	"Card declined"	The decline line and the quiet caption naming the method that failed.
running	boolean	true	Runs the countdown. It also stops while the document is hidden or while busy.
busy	boolean	false	The attempt is in flight: the button reads Trying, its ring spins, and the countdown holds.
onRetryNow	() => void	—	Fires from the press on Retry now.
onElapse	() => void	—	Fires from the interval when the wait reaches zero, so the host can run the attempt.
onTick	(secondsLeft: number) => void	—	Fires once a second from the interval with the seconds left.
label	string	"Retry schedule"	Names the schedule for assistive technology.