With Countdown

A banner with a live countdown timer beside the message. Build urgency for a sale, webinar, or deadline and prompt visitors to act before time runs out.

import { Button } from '@/components/ui/button';
import { useEffect, useState } from 'react';

export default function WithCountdown() {
  const [timeLeft, setTimeLeft] = useState({
    hours: 24,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft((current) => {
        if (
          current.hours === 0 &&
          current.minutes === 0 &&
          current.seconds === 0
        ) {
          clearInterval(timer);
          return current;
        }

        let newSeconds = current.seconds - 1;
        let newMinutes = current.minutes;
        let newHours = current.hours;

        if (newSeconds < 0) {
          newSeconds = 59;
          newMinutes -= 1;
        }
        if (newMinutes < 0) {
          newMinutes = 59;
          newHours -= 1;
        }

        return {
          hours: newHours,
          minutes: newMinutes,
          seconds: newSeconds,
        };
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="bg-muted">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        <div className="flex items-center justify-between gap-x-6 p-4">
          <div className="flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2">
            <p className="text-sm font-medium">
              Flash Sale Ends in:{' '}
              <span className="font-mono">
                {String(timeLeft.hours).padStart(2, '0')}:
                {String(timeLeft.minutes).padStart(2, '0')}:
                {String(timeLeft.seconds).padStart(2, '0')}
              </span>
            </p>
            <Button size="sm" variant="default">
              Shop Now
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

With Countdown is a slim full-width banner that sits at the top of a page. A short label on the left reads "Flash Sale Ends in:" followed by a live monospaced clock ticking down from 24 hours in HH:MM:SS format. A small action button on the right gives visitors somewhere to go the moment they read the message.

The label text, the initial countdown duration, and the button copy are all independent. You can swap the message to match any deadline, adjust the starting hours, and rename the button without touching the timer logic or the layout.

When to use

Reach for this block when a hard deadline is the core message and you need the page to communicate that urgency at first glance. It suits a logistics or delivery platform announcing a same-day shipping cutoff, a flash discount expiring at midnight, or a webinar opening in a few hours. The timer does the persuasion work that a static banner cannot, and the paired button means visitors can act without scrolling.

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to set the offer context directly below the banner

After

A CTA section to reinforce the offer for readers who scrolled past the banner
The With Action sibling if you need a persistent prompt once the countdown expires

What you can display

The obvious fit is a time-boxed commercial event with a clear cutoff. A few other ways to use the frame:

Shipping deadlines. Show the hours remaining before same-day or next-day dispatch closes so shoppers know exactly when they need to order by.
Webinar or event registration. Count down to a live session and pair the button with a registration link so the sense of urgency converts directly.
Limited inventory window. Frame a stock hold or reservation period with the clock so buyers understand the offer is genuinely finite.

Tip: set the countdown target on the server and seed the initial state from that value so the timer stays consistent across page refreshes and different visitors.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to set the offer context directly below the banner

After

A CTA section to reinforce the offer for readers who scrolled past the banner
The With Action sibling if you need a persistent prompt once the countdown expires

What you can display

The obvious fit is a time-boxed commercial event with a clear cutoff. A few other ways to use the frame:

Shipping deadlines. Show the hours remaining before same-day or next-day dispatch closes so shoppers know exactly when they need to order by.
Webinar or event registration. Count down to a live session and pair the button with a registration link so the sense of urgency converts directly.
Limited inventory window. Frame a stock hold or reservation period with the clock so buyers understand the offer is genuinely finite.

Tip: set the countdown target on the server and seed the initial state from that value so the timer stays consistent across page refreshes and different visitors.

With Countdown

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display