SayUI
← Library→ Turn this into a prompt
Content & display

Countdown Timer

A display that counts down to a deadline—promos, launches, and resend cooldowns.

Also known as timer · flash-sale clock · OTP resend timer

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Countdown Timer".

Build a flash-sale countdown from a server deadline and server-now offset; each frame recomputes remaining time; tabular-nums segments; onFinish flips CTA state. Don’t rely on naked setInterval decrement.

Anatomy:
- time segment: H/M/S blocks; flip-card style is classic for retail.
- server time: Deadline from the server; client only computes the delta.
- finished state: What happens at 0—“Buy now” enables—is the real design.

Preferred API / pattern: `custom hook from server deadline`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Client clock only
  • ○Avoid: Decrementing a counter in the background
  • ○Avoid: Silent zero
  • ○Avoid: Width jump without tabular-nums.

In plain wordsHow people search for it

“the 00:12:59 clock on a sale page that keeps ticking down”““resend code in 60s” under the SMS field”“how long until the launch unlocks”

AnatomyOpen for part names

time segment
H/M/S blocks; flip-card style is classic for retail.
server time
Deadline from the server; client only computes the delta.
finished state
What happens at 0—“Buy now” enables—is the real design.

How to write itOpen for stack patterns

Web (HTML/CSS)rAF/interval from a target timestamp
React + Tailwind + shadcn/uicustom hook from server deadline
SwiftUITimelineView / Text with timer
Ant Design<Statistic.Countdown value onFinish />

Notes

Never trust the phone clock alone—skew is common. Server sends deadline (+ optional server now for offset); each tick recomputes target − now, don’t decrement a local integer that drifts in background tabs. tabular-nums for stable width. Design the zero state, not just the ticking.

Common mistakesHumans and models trip here

  • Client clock only: a phone five minutes fast ends the sale early.
  • Decrementing a counter in the background: returns stale after tab sleep—recompute from deadline.
  • Silent zero: users don’t know anything changed—update UI/CTA.
  • Width jump without tabular-nums.

More failure symptoms on AI broke it.

Related patterns

Count Up / Number TickerAnimate a number from a start value to its target so stats land with a little ceremony.Progress Bar / IndicatorA determinate (or sometimes indeterminate) bar showing how far a task has gone.Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.

Spotted a wrong name or missing pattern?

Message on X