Flip Clock

Animated split-flap clock that supports live time and countdown modes.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Credits

This port is based on the 8 Star Labs UI flip clock — thanks to 8 Star Labs UI for the original design.

Installation

Usage

Live clock and countdown

Live clock

Countdown (shows days, violet variant)

Sizes

Size: sm

Size: md

Size: lg

Size: xl

Variants

Variant: default

Variant: secondary

Variant: destructive

Variant: outline

Variant: muted

Variant: red

Variant: orange

Variant: amber

Variant: yellow

Variant: lime

Variant: green

Variant: emerald

Variant: teal

Variant: cyan

Variant: sky

Variant: blue

Variant: indigo

Variant: violet

Variant: purple

Variant: fuchsia

Variant: pink

Variant: rose

Day display modes

show-days="auto" (only when days > 0)

show-days="always"

show-days="never"

Props

countdown (boolean, default false): when true, counts down toward targetDate; otherwise shows the current time.
targetDate (Date | string | number): future point in time to count down to. Ignored when countdown is false.
showDays (auto | always | never, default auto): controls when the days column is rendered.
size (sm | md | lg | xl): adjusts digit dimensions and spacing.
variant: supports default, secondary, destructive, outline, muted, plus Tailwind color hues (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose).

Accessibility

The wrapping element uses aria-live="polite" and includes a visually hidden time string for screen readers.
Digits update individually to avoid excessive announcements while keeping time changes detectable.

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Form

Building forms with VeeValidate and Zod.