Documentation

Integrate FlipClock into your React application in minutes.

Installation

Install the package using npm, yarn, or pnpm.

npm install @hasthiya_/flip-clock

Basic Usage

Import the component and pass a target date.

import FlipClock from "@hasthiya_/flip-clock";

<FlipClock targetDate={new Date("2026-12-31T00:00:00")} />

Note: In Next.js, use FlipClock inside a Client Component ("use client").

Props Reference

Prop	Type	Default	Description
targetDate	Date	88 days from now	The target date to count down to.
staticTime	{ days?, hours?, minutes?, seconds? }	—	Override the countdown with static values (disables auto-tick).
cardStyle	FlipCardStyle	—	Card appearance: background, backgroundDark, width, height, borderRadius, boxShadow.
digitStyle	FlipDigitStyle	—	Digit typography: color, fontFamily, fontSize, textShadow.
labelStyle	FlipLabelStyle	—	Label configuration: visible, color, fontFamily, fontSize, fontWeight, letterSpacing, textTransform.
lineStyle	FlipLineStyle	—	Horizontal divider line on each card: color, height.
animation	FlipAnimationConfig	—	Flip animation: flipDuration, bounceIntensity, flipDownEasing, flipUpEasing.
separator	FlipSeparatorConfig	none	Separator between groups: type ('none' \| 'colon' \| 'dot'), color, size.
labels	FlipClockLabels	—	Custom label text for days, hours, minutes, seconds.
segments	FlipClockSegments	all true	Which segments to display: days, hours, minutes, seconds.
dayDigits	number	2	Number of digits for the days display.
groupGap	string	'3rem'	Gap between time groups (CSS value).
cardGap	string	'0.375rem'	Gap between individual digit cards (CSS value).
labelGap	string	'1rem'	Gap between cards and the label (CSS value).
onComplete	() => void	—	Callback fired when countdown reaches zero.
orientation	'row' \| 'column'	'row'	Layout direction: row (horizontal) or column (stacked).
scale	number	1	Scale factor for the whole clock. Example: scale={0.8} for 80% size.
className	string	—	Additional className for the outer wrapper.
style	CSSProperties	—	Additional inline style for the outer wrapper.