Content v1.0.0

Countdown

Animated countdown timer that ticks down to a target date. Simple style displays plain numbers with labels. Flip style renders a 3D flip-clock effect with split cards and CSS keyframe animations.

Simple

Plain numbers with labels below each unit, joined by colon separators

Options

Name Type Default Description
target_date * String required ISO 8601 date/time string to count down to
show_days Boolean true Whether to display the days unit
show_hours Boolean true Whether to display the hours unit
show_minutes Boolean true Whether to display the minutes unit
show_seconds Boolean true Whether to display the seconds unit
expired_message String "Time's up!" Message shown when countdown reaches zero
labels Hash { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" } Custom labels for each time unit
size Symbol :md Size variant: :sm, :md, :lg

Flip

3D flip-clock animation with split cards and perspective transforms

Options

Name Type Default Description
target_date * String required ISO 8601 date/time string to count down to
show_days Boolean true Whether to display the days unit
show_hours Boolean true Whether to display the hours unit
show_minutes Boolean true Whether to display the minutes unit
show_seconds Boolean true Whether to display the seconds unit
expired_message String "Time's up!" Message shown when countdown reaches zero
labels Hash { days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" } Custom labels for each time unit
size Symbol :md Size variant: :sm, :md, :lg

Changelog v1.0.0

- v1.0.0: Initial release with simple and flip styles

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now