Number Ticker

Free

Counts up or down to a target number when it scrolls into view.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

delay0

decimalPlaces0

startValue0

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/number-ticker.json

Example

Decimal

Open in

components/ui/number-ticker-decimal-demo.tsx

import { NumberTicker } from "@/components/ui/number-ticker"

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

Start Value

Open in

components/ui/number-ticker-demo-2.tsx

import { NumberTicker } from "@/components/ui/number-ticker"

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

Usage

import { NumberTicker } from "@/components/ui/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

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/number-ticker.json

Example

Decimal

Open in

components/ui/number-ticker-decimal-demo.tsx

import { NumberTicker } from "@/components/ui/number-ticker"

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

Start Value

Open in

components/ui/number-ticker-demo-2.tsx

import { NumberTicker } from "@/components/ui/number-ticker"

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

Usage

import { NumberTicker } from "@/components/ui/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