Number Ticker

PreviewCode

0

@/demos/NumberTickerDemo.tsx

import { NumberTicker } from '@/registry/magicui/number-ticker'

export function NumberTickerDemo() {
  return (
    <NumberTicker
      value={100}
      class="
        text-8xl font-medium tracking-tighter whitespace-pre-wrap text-black
        dark:text-white
      "
    />
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/number-ticker

bun

bunx shadcn@latest add @magicui-solid/number-ticker

yarn

yarn dlx shadcn@latest add @magicui-solid/number-ticker

npm

npx shadcn@latest add @magicui-solid/number-ticker

Example

Decimal

PreviewCode

0

@/demos/NumberTickerDecimalDemo.tsx

import { NumberTicker } from '@/registry/magicui/number-ticker'

export function NumberTickerDecimalDemo() {
  return (
    <NumberTicker
      value={5.67}
      decimalPlaces={2}
      class="
        text-8xl font-medium tracking-tighter whitespace-pre-wrap text-black
        dark:text-white
      "
    />
  )
}

Start Value

PreviewCode

80

@/demos/NumberTickerDemo2.tsx

import { NumberTicker } from '@/registry/magicui/number-ticker'

export function NumberTickerDemo2() {
  return (
    <NumberTicker
      value={100}
      startValue={80}
      class="
        text-8xl font-medium tracking-tighter whitespace-pre-wrap text-black
        dark:text-white
      "
    />
  )
}

Usage

import { NumberTicker } from '@/components/magicui/number-ticker'

<NumberTicker value={100} />

Props

Prop	Type	Default	Description
value	int	0	The value to count to
direction	"up" "down"	"up"	The direction to count in
delay	number	0	The delay before counting
decimalPlaces	number	0	The number of decimal places to show
startValue	number	0	The value to start counting from

Original:

magicui.design/docs/components/number-ticker