Countdown Band CTA
A free animated CTA section with a live countdown timer beside the ask.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Countdown Band CTA is a free countdown timer React component for Next.js, styled with Tailwind, that closes a landing page with a full-width rounded band. Days, hours, minutes and seconds count down toward a fixed target date beside a headline, an optional supporting line and a primary call to action rendered as a real anchor.
Each unit is two tabular digits with a reserved fixed width, so a digit flips only when it changes and nothing ever shifts. One gated one-second interval drives the clock, pausing while offscreen or when the tab is hidden and recomputing from the real clock on resume so it never drifts. The timer lives in a labelled group, announces a coarse per-minute summary to assistive tech, and under reduced motion the digits swap instantly with no flip.
Early-bird pricing ends soon
Countdown Band CTA pairs a live timer with one clear action, so the deadline and the button read as one considered ask.
Claim the launch priceInstall
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/cta-countdown-bandUsage
import { CtaCountdownBand } from "@/components/cta-countdown-band";
export function Example() {
return (
<CtaCountdownBand
title="Early-bird pricing ends soon"
description="Lock in the launch price before the timer runs out."
targetDate="2026-12-31T23:59:59Z"
cta={{ label: "Claim the launch price", href: "/signup" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline copy, rendered as the band's h2. |
| description | string | undefined | Optional supporting line rendered under the title. |
| targetDate | string | required | Target instant as an ISO 8601 string (e.g. 2026-12-31T23:59:59Z). Parsed once. |
| cta | { label: string; href: string } | required | Primary call to action, rendered as a real anchor with inverted tokens. |
| expiredLabel | string | "This offer has ended." | Text shown, and announced once, when the countdown reaches zero. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Countdown Band CTA ships no bespoke tokens: it draws entirely on the semantic palette, so it inherits your theme automatically. The band uses bg-surface with a border-border edge, the digits and headline use text-foreground, the captions and separators use text-muted, and the primary button inverts to bg-foreground with text-background. Retheme it by overriding those semantic tokens at the root, for example to warm the surface:
:root {
--surface: oklch(0.97 0.02 90);
--foreground: oklch(0.2 0.03 260);
}Frequently asked questions
- Is Countdown Band CTA free for commercial use?
- Yes. Countdown Band CTA is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the countdown timer accessible and does it avoid layout shift?
- Yes. Each digit sits in a reserved fixed-width cell so the timer never shifts as numbers change, the flip layers are aria-hidden, and the value reaches assistive tech through a labelled group with a polite live region that announces a coarse summary once a minute rather than every second. The headline is an h2, the button is a real anchor reachable by keyboard with a visible focus ring, and under reduced motion the digits swap instantly with no flip.
- How do I set the deadline and what happens when it ends?
- Pass any ISO 8601 instant to targetDate and it is parsed once. When the clock reaches zero the interval clears, the digits are replaced by the expiredLabel text, and that message is announced once. The timer is computed only on the client from the real clock, so server rendering stays deterministic and hydration never mismatches.