Examples

Copy and customize these snippets for your project.

Example 1

Minimal Classic

Clean black and white default appearance.

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

Example 2

With Colon Separator

Classic time display with colon separators.

<FlipClock 
  targetDate={new Date("2026-12-31")} 
  separator={{ type: "colon", color: "#1a1a1a" }}
/>

Example 3

Inverted Theme

Light cards with dark digits for contrast.

<FlipClock 
  targetDate={new Date("2026-12-31")} 
  cardStyle={{ background: "#f5f5f5", backgroundDark: "#e5e5e5" }}
  digitStyle={{ color: "#1a1a1a" }}
/>

Example 4

Purple Accent

Dark theme with purple accent color.

<FlipClock 
  targetDate={new Date("2026-12-31")} 
  cardStyle={{ background: "#1e1e2e", backgroundDark: "#181825" }}
  digitStyle={{ color: "#cba6f7" }}
  separator={{ type: "colon", color: "#cba6f7" }}
/>

Example 5

Warm Amber

Retro warm palette with amber digits.

<FlipClock 
  targetDate={new Date("2026-12-31")} 
  cardStyle={{ background: "#292524", backgroundDark: "#1c1917" }}
  digitStyle={{ color: "#f59e0b" }}
  separator={{ type: "dot", color: "#f59e0b" }}
/>

Example 6

Emerald Green

Modern dark theme with emerald accents.

<FlipClock 
  targetDate={new Date("2026-12-31")} 
  cardStyle={{ background: "#064e3b", backgroundDark: "#022c22" }}
  digitStyle={{ color: "#34d399" }}
  separator={{ type: "colon", color: "#34d399" }}
/>