Number Ticker Demo

PreviousNext

Example showing animated counting numbers.

Docs
magicuiexample

Preview

Loading preview…
registry/example/number-ticker-demo.tsx
import { NumberTicker } from "@/registry/magicui/number-ticker"

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

Installation

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

Usage

import { NumberTickerDemo } from "@/components/number-ticker-demo"
<NumberTickerDemo />