labsUI

CountTo

Springs a number up from a start value once it scrolls into view. Prefix, suffix, decimals and locale.

npx @kznlabs/labsui add count-to

Revenue

$48,290

Users

12,840

Uptime

99.9%

import { CountTo } from "@/components/ui/count-to";export function Stats() {  return <CountTo to={99.9} decimals={1} suffix="%" />;}

<CountTo>

Springs a number from from to to once it scrolls into view. Final value stays in the DOM for SEO.

  • to*
    number

    Final number.

  • decimalsdefault 0
    number

    Digits after the decimal point.

  • fromdefault 0
    number

    Starting number.

  • localedefault "en-US"
    string

    BCP 47 locale for grouping and decimals.

  • prefixdefault ""
    string

    Text before the number, e.g. "$".

  • suffixdefault ""
    string

    Text after the number, e.g. "%".

PropTypeDefault
to*

Final number.

number—
decimals

Digits after the decimal point.

number0
from

Starting number.

number0
locale

BCP 47 locale for grouping and decimals.

string"en-US"
prefix

Text before the number, e.g. "$".

string""
suffix

Text after the number, e.g. "%".

string""

* required. Every component also takes className.