Drop Countdown

Flip-card countdown for drops and flash sales, with stock pressure and live viewers.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

Each card folds over when its digit changes, the stock bar drains and turns red under 25%, and a pulsing 'N viewing' adds urgency. Switches to 'Live now'.

Installation

$ npx shadcn@latest add https://guetix.com/r/drop-countdown.json

Uses the shadcn CLI. It creates components/guetix/drop-countdown.tsx and installs nothing else.

Usage

example.tsx

import { DropCountdown } from "@/components/guetix/drop-countdown";

export default function Example() {
  return <DropCountdown />;
}

Props

Prop	Type	Default	Description
target	Date \| string \| number	—	Launch time.
title	string	—	Product line.
stock	number	250	Units at launch.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

role=timer with a readable label; stock is a progressbar.

Drop Countdown

Preview

Drop Countdown

Preview