DocseffectsNumber ticker

Number ticker

An odometer-style number that rolls each digit to the next value.

Palette
Calamansi
12,847

Kalansing

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/number-ticker

How to use

demo.tsx
import { NumberTicker } from "@/components/ui/number-ticker"
export function Demo() {
  return <NumberTicker value={12847} className="text-4xl font-semibold" />
}

Props

Options you can pass to customize this component.

  • value*required
    number

    The number to show.

  • variantoptional
    whitecalamansislatecitrus

    Surface palette. Calamansi is the default slab; White is white in light mode and near-black in dark.

  • durationoptional
    number

    Seconds for each digit to settle.

  • staggeroptional
    number

    Delay between digits, in seconds.

  • directionoptional
    updown

    Roll the digits upward or downward.

  • prefixoptional
    string

    Static text before the digits, such as a currency symbol.

  • suffixoptional
    string

    Static text after the digits.

  • formatoptional
    (value: number) => string

    Turns the number into text before the digits are split.

  • classNameoptional
    string

    Extra classes merged onto the ticker.

Dependencies

motion

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousMarquee
NextDock