Does CTA Countdown work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

CTA Countdown

Limited-time offer band with a promo code, a live countdown and a shimmering button.

Type: CTA section
Styles: Colorful, Gradient
Licence: Charcoal UI Pro

About CTA Countdown

CTA Countdown is a bold accent band for a sale or launch offer: a big headline, a dashed promo code ticket, a live countdown to the deadline and a shimmering button.

It is a full-width cta section for React and Tailwind CSS 4, in a colorful and gradient style. Preview it at any width above, then install it with one command.

When to use CTA Countdown

Seasonal sales and launch discounts.
Course enrolment windows.
Pre-order bonuses.
Members-only early access.

How it is built

The band takes your accent colour, the countdown defaults to 30 hours from now, and the label, code and button are props.

It is composed from Countdown, Shimmer Button, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with CTA Countdown

CTA Countdown is part of 6 full templates, so you can see it in a finished page.

Lattice template: Generate, keep, sell.
Roastery template: Build a box, save every delivery.
Halo template: One product, every angle.
Dropline template: Built for the hour everything sells out.
Darkroom template: A course people finish.
Nova template: Take pre-orders before you ship.
CTA Ember: A React closing CTA band with rising embers and a shimmering button
CTA Landscape: A React CTA card with a moonlit photo, metal headline and liquid-metal button
CTA Newsletter: A React newsletter CTA that validates inline and confirms with a drawn check
CTA Download: A React app download CTA with store buttons and a QR code for desktop
Countdown: An animated React countdown timer whose digits roll as they tick
Shimmer Button: An animated React shimmer button with an orbiting accent edge and a sweeping sheen

Install CTA Countdown

npx shadcn@latest add @charcoal/cta-countdown

CTA Countdown is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does CTA Countdown work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Countdown: Days, hours, minutes and seconds, with each digit rolling down as it ticks.
Shimmer Button: A charcoal pill with an ember edge that orbits the border and a sheen that sweeps across.

CTA Countdown as Markdown