Countdown

'use client';

import { Countdown } from '@/ui/Countdown';

const labels = {
  days: 'days',
  hours: 'hours',
  minutes: 'minutes',
  seconds: 'seconds',
};

const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

const nextWeek = new Date();
nextWeek.setDate(nextWeek.getDate() + 7);

export function CountdownDemo() {
  return (
    <div className="flex flex-col gap-8">
      <Countdown countdown={{ to: tomorrow.toISOString(), labels }} theme="saffron" />
      <div className="bg-ultramarine p-6 rounded-16">
        <Countdown
          countdown={{ to: nextWeek.toISOString(), labels }}
          theme="white"
          className="text-white"
        />
      </div>
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/countdown.json
Copy

Usage

Copy'use client';
 
import { Countdown } from '@/ui/Countdown';
 
export function Component() {
  const target = new Date();
  target.setDate(target.getDate() + 1);
 
  return (
    <Countdown
      countdown={{
        to: target.toISOString(),
        labels: {
          days: 'days',
          hours: 'hours',
          minutes: 'minutes',
          seconds: 'seconds',
        },
      }}
      theme="saffron"
    />
  );
}

API Reference

Countdown

CountdownLabels

Notes

• Flip animation: Each digit transitions with a 3D flip effect when its value changes, using the animate-tick / animate-tock keyframes defined in the trident-ui CSS.
• Leading zero dimming: Units whose value is 0 and whose higher-order units are also 0 are rendered with the black theme to indicate they are inactive.
• Direction: The component always renders dir="ltr" regardless of the document direction, so digit order stays consistent.
• Client component: Uses setInterval via useEffect and must be rendered in a client context ('use client').
• Accessibility: The wrapper has role="timer" so assistive technologies announce it as a timer landmark.
• Stopping: The interval is cleared automatically when the target date is reached; no further re-renders occur after expiry.