Banner Countdown Trial

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner24.tsx instead.

Usage

The file also exports banner24Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner24, banner24Demo } from "@/components/blocks/banner/banner24";

export default function Page() {
  return <Banner24 {...banner24Demo} />;
}

Props

Behavior notes

• The countdown updates once a minute, not once a second, since a trial banner doesn't need second-level precision and a slower interval is lighter on the page.
• Text color moves from muted to amber under 48 hours remaining and to red under 12, computed from the same remaining value that drives the digits, so the two never fall out of sync.
• Dismissing the banner is local component state; there's no built-in persistence, so it reappears on the next full page load unless you add your own storage.
• remaining starts at null so the server render and the first client render agree on the placeholder text, avoiding a hydration mismatch against Date.now().

Frequently asked questions