Countdown Band CTA
A free animated CTA section with a live countdown timer beside the ask.
Founding pricing ends when the clock does
Upgrade now and your workspace keeps the founding rate for life. New seats after launch join at standard pricing.
Lock in the founding rateCountdown 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.
Install
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="Founding pricing ends when the clock does"
description="Upgrade now and your workspace keeps the founding rate for life."
targetDate="2026-12-31T23:59:59Z"
cta={{ label: "Lock in the founding rate", 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 exposes four knobs for its stage: --cta-countdown-panel is the band fill (defaults to your card token), --cta-countdown-glow-1 is the brand wash behind the timer and the hairline top edge (defaults to your primary), --cta-countdown-glow-2 is the cooler counter-glow opposite it (defaults to your ring), and --cta-countdown-glow-opacity caps the whole wash. Everything else is semantic: the digits and headline use text-foreground, captions and separators use text-muted-foreground, and the primary button inverts to bg-foreground with text-background, so the band inherits your theme automatically. Override the knobs at the root, for example to run the wash on one hue and lift it slightly:
:root {
--cta-countdown-glow-1: var(--primary);
--cta-countdown-glow-2: var(--primary);
--cta-countdown-glow-opacity: 0.28;
}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.