Number Ticker

Animate numbers to count up or down to a target number

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/number-ticker.json"

NumberTicker.vue

Prop Name	Type	Default	Description
`value`	`int`	`0`	Value to count to
`direction`	`up \| down`	`up`	Direction to count in
`decimalPlaces`	`number`	`0`	Number of decimal places to show
`delay`	`number`	`0`	Delay before counting (in milliseconds)
`duration`	`number`	`1000`	Total duration for the entire animation (in milliseconds).
`transition`	`TransitionPresets`	`easeOutCubic`	Name of transition preset (https://vueuse.org/core/useTransition)

On This Page