Flip Number

A classic flip animation component for numbers or characters.

Installation

bash

npx draft-cli vue add flip-countdown

vue

<script setup>
import { FlipNumber } from '@draft-ui/vue'
</script>

<template>
  <FlipNumber value="5" class="size-10" />
</template>

Combine multiple FlipNumber components to create a countdown.

DAYS

HRS

MINS

SECS

This example uses the FlipCountdown component which composes multiple FlipNumber components.

Prop	Type	Default	Description
`value`	`string`	Required	The character or number to display.