Flip Clock
A retro-style mechanical flip clock component. Supports both real-time clock synchronization and target-based countdown modes.
Installation
npx raya-ui@latest add flip-clockFile Structure
your-project
components
ui
flip-clock
FlipClock.vue
FlipUnit.vue
API Reference
Props
countdownbooleanfalseIf true, counts down to targetDate. Otherwise, displays the current real-time clock.
targetDateDate | stringRequired if countdown is true. The future date/time to count down to.
sizeenum"md"Controls the scale of the clock digits. Accepts sm, md, lg, or xl.
variantstring"default"Color theme variant. Accepts default, secondary, destructive, outline, or muted.
showDaysenum"auto"Controls visibility of the days section in countdown mode. Accepts auto, always, or never.
Settings
source-code.vue
<script setup lang="ts">
import { FlipClock } from '@/components/ui/flip-clock'
</script>
<template>
<FlipClock />
</template>