Resend Timer

Pro

“Resend code” countdown for verification screens. As a link, ring or button that fills as time runs down and confirms with a check. It turns tappable at zero and can lock after too many tries.

Preview

Installation

npx @lumioui/cli add pro/resend-timer

Usage

import { formatResendTime, ResendTimer } from "@/components/ui/resend-timer/resend-timer";
<ResendTimer />

Also exported: formatResendTime.

Examples

Attempt limit

A password reset that caps resends.

Call me instead

A clinic portal's "didn't get the code" stack.

OTP inline

Phone verification in a banking app.

API reference

Prop Type Default
seconds number

Countdown length in seconds. Default 30.

 30
onResend () => void | Promise<unknown>

Fired on tap once the countdown ends. Return a promise to hold "Sending…".

 —
autoStart boolean

Start counting on mount (the code was just sent). Default true.

 true
startKey string | number

Change to restart the countdown from outside.

 —
maxAttempts number

Resends allowed before the control locks. Default unlimited.

 —
appearance "link" | "button" | "ring"

"link" — inline text (default); "button" — full-width pill; "ring" — icon disc with a depleting ring.

 "link"
label string

Action label. Default "Resend code".

 "Resend code"
countdownLabel
(time: string, secondsLeft: number) … (time: string, secondsLeft: number) => string

Countdown copy. Default ${label} in 0:29.

 —
prefix string

Muted lead-in before the link, e.g. "Didn't get it?". Link appearance only.

 —
sendingLabel string "Sending…"
sentLabel string "Code sent"
limitLabel string

Shown once maxAttempts is used up.

 "No more resends. Try again la…
icon IconName

Glyph for button / ring appearances. Default "refresh".

 "refresh"
sentHold number

How long the sent state holds before the clock restarts, in ms. Default 700.

 SENT_HOLD_MS
disabled boolean false
className string —