0

NumberCount

PreviousNext

An animated number whose digits roll between values, built on NumberFlow.

100
"use client"

import * as React from "react"

Installation

bunx --bun shadcn@latest add @ondo-ui/number-count

This installs NumberCount along with its @number-flow/react dependency.

Usage

import { NumberCount } from "@/components/ui/number-count"
<NumberCount value={1234} />

Examples

Formatting

NumberCount forwards NumberFlow's format prop (Intl.NumberFormat options), so compact notation, currency, and percent all work out of the box.

1.2K$1,234
"use client"

import * as React from "react"

API reference

NumberCount accepts every NumberFlow prop (it spreads ...props onto the underlying element). The most common:

PropTypeDefaultDescription
valuenumber—Required. The number to display; changes animate.
formatIntl.NumberFormatOptions—e.g. { notation: "compact" }, currency, percent.
prefixstring—Rendered before the number.
suffixstring—Rendered after the number.
classNamestring—Merged onto the NumberFlow host (after tabular-nums).

Built on

NumberCount is a thin wrapper over NumberFlow from @number-flow/react, adding ondo's tabular-nums default. Need the raw component? Use NumberFlow directly.

Looking for a ready-made count badge? See NumberBadge.