A number whose digits roll to their new value, like an odometer or a note counter.
Import it from rei-kit/motion:
import { NumberTicker } from 'rei-kit/motion'
Open NumberTicker in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { NumberTicker } from 'rei-kit/motion'
const balance = ref(48200)
</script>
<template>
<NumberTicker :value="balance" :format="{ style: 'currency', currency: 'TRY' }" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
value | number | yes | The number to show. Change it and the digits roll to the new one. |
from | number | undefined | Where the digits start when the component mounts, so a count can roll up as the page opens. Unset, the first frame is already the value. |
format | Intl.NumberFormatOptions | undefined | Passed to `Intl.NumberFormat`: `{ style: 'currency', currency: 'TRY' }`, decimals, grouping. |
locale | string | undefined | A BCP 47 tag. Unset, the kit's active formatting locale. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.