Countdown

Special

Countdown timer and stopwatch with flip-clock display, multiple variants, and controls.

Import

import { PixelCountdown, PixelTimer } from "@/components/ui/pixel/pixel-countdown"

Usage

0
0
DAYS
:
0
0
HOURS
:
0
0
MINS
:
0
0
SECS
0
5
MIN
:
0
0
SEC

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-countdown.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";

const countdownVariants = cva("flex items-center gap-2 font-pixel font-bold", {
  variants: {
    variant: {
      default: "",
      retro: "",
      digital: "",
      flip: "",
    },
    size: {
      sm: "text-2xl",
      md: "text-4xl",
      lg: "text-6xl",
      xl: "text-8xl",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "md",
  },
});

const digitVariants = cva(
  "border-4 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] flex items-center justify-center",
  {
    variants: {
      variant: {
        default: "bg-white dark:bg-[#2a2a2a] text-black dark:text-white",
        retro: "bg-pixel-secondary text-black",
        digital: "bg-[#0a0a0a] dark:bg-black text-[#ff0000] dark:text-pixel-error",
        flip: "bg-pixel-primary text-black dark:text-white",
      },
      size: {
        sm: "w-12 h-16 text-2xl",
        md: "w-16 h-20 text-4xl",
        lg: "w-24 h-32 text-6xl",
        xl: "w-32 h-40 text-8xl",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);


// ... (more code below)

Props

PropTypeDefaultDescription
targetDateDate-Target date for countdown
initialSecondsnumber-Initial seconds (alternative to targetDate)
variant"default" | "retro" | "digital" | "flip""default"Display style
size"sm" | "md" | "lg" | "xl""md"Countdown size
showDaysbooleantrueShow days unit
showHoursbooleantrueShow hours unit
showMinutesbooleantrueShow minutes unit
showSecondsbooleantrueShow seconds unit
labelsbooleantrueShow unit labels
onComplete() => void-Callback when countdown reaches zero
showControlsbooleantrueShow start/pause/reset buttons (PixelTimer only)

Examples

Event Countdown

Countdown to specific date

0
0
DAYS
:
0
0
HOURS
:
0
0
MINS
:
0
0
SECS
0
5
MIN
:
0
0
SEC

Timer with Controls

Controllable timer

0
0
DAYS
:
0
0
HOURS
:
0
0
MINS
:
0
0
SECS
0
5
MIN
:
0
0
SEC

Seconds Only

Simple seconds counter

0
0
DAYS
:
0
0
HOURS
:
0
0
MINS
:
0
0
SECS
0
5
MIN
:
0
0
SEC

Pomodoro Timer

25-minute focus timer

0
0
DAYS
:
0
0
HOURS
:
0
0
MINS
:
0
0
SECS
0
5
MIN
:
0
0
SEC

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.