Countdown Rail Banner

Installation

pnpm dlx shadcn@latest add @cleverui/banner-countdown-rail

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { BannerCountdownRail } from '@/components/blocks/banner-countdown-rail'

Exampletsx

import { BannerCountdownRail } from '@/components/blocks/banner-countdown-rail'

export default function BannerCountdownRailDemo() {
  return (
    <div className="flex min-h-[240px] flex-col justify-center">
      <BannerCountdownRail
        message="Founding plan pricing ends soon, lock $29/mo before the public list."
        endsAt="2026-07-20T23:59:00.000Z"
        endsAtLabel="Ends Sun 20 Jul, 11:59pm"
        now="2026-07-13T14:30:00.000Z"
        cta={{ label: 'Claim founding plan', href: '#' }}
      />
    </div>
  )
}

API reference

BannerCountdownRail accepts the following props.

Prop	Type	Default	Description
`message`*	`string`	–	the offer line, e.g. 'Launch pricing ends soon'
`endsAt`*	`Date \| string`	–	countdown target datetime (ISO string ok)
`endsAtLabel`*	`string`	–	PREFORMATTED visible end text, e.g. 'Ends Sun 20 Jul, 11:59pm', the only date text ever rendered server-side
`now`	`Date \| string`	–	reference time for deterministic SSR/demos; live clients omit
`cta`*	`{ label: string; href: string }`	–	the single compact button docked at the right edge

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Related components

Announce Banner

Top-of-page announcement bar, one line, one link, one dismiss. Height collapses shut on a callback-driven dismiss, with info and warning variants in honest primary and destructive tokens.

Changelog Toast

A corner toast announcing a release, version in mono, a one-line note, and a view link. Enters after a set delay, dismisses through a callback, appears instantly under reduced motion.

Quiet Cookie Banner

A consent bar without dark patterns, plain-language copy, a Decline button styled exactly equal to Accept, and a quiet policy links row, docked to the bottom edge.

Preview Mode Banner

Floating preview-mode pill for React sites, hatched draft swatch, mono PREVIEW label, save meta, and a real Exit button. A fixed Tailwind-token capsule; dismissal causes zero layout shift.

Update Prompt Banner

New-version banner for React apps, one line, a mono version tag, and honest paired Refresh and Later buttons. Height animates shut on dismiss so the Tailwind layout never jumps.

Challenge Countdown Panel

A gym challenge block that starts the clock, bold condensed challenge name, an SSR-safe rolling countdown to a prop-driven start date, stakes line and spots left. React and Tailwind.

Frequently asked questions

How do I install the Countdown Rail Banner component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/banner-countdown-rail`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Countdown Rail Banner require?

Countdown Rail Banner uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Countdown Rail Banner to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code