Premium & Brand

Number Flow

Formatted number whose digits roll to each new value.

Import

tsx

import { NumberFlow } from "@cronus-ui/ui";

bash

npx cronus-ui add number-flow

Examples

Digit flow

Each digit rolls the short way to the next value — grouping, prefix and suffix stay put. Shuffle through number, currency, percent and decimal.

tsx

<NumberFlow value={12345} className="font-display text-5xl text-fg" />

Currency

Two fraction digits, prefix for the symbol. Click to increment and watch the ones place roll.

tsx

function Revenue() {
  const [value, setValue] = useState(19348.43);
  return (
    <div className="flex flex-col items-center gap-4">
      <NumberFlow
        value={value}
        prefix="$"
        format="currency"
        className="font-display text-5xl text-fg"
      />
      <Button size="sm" variant="outline" onClick={() => setValue((n) => n + 1)}>
        Update value
      </Button>
    </div>
  );
}

API Reference

Generated from the component's exported types.

NumberFlowProps

Extends Omit<ComponentPropsWithoutRef<"span">, "children">

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	—
`value`*	`number`	—	Number to display. Non-finite values render as `0`.
`prefix`	`string`	`""`	Text drawn before the formatted number.
`suffix`	`string`	`""`	Text drawn after the formatted number.
`format`	`NumberFlowFormat`	`"number"`	How the number is formatted. `currency` and `decimal` default to 2 fraction digits (the currency symbol is `prefix`, not Intl). `percentage` uses `Intl` percent style (pass `0.42` for 42%).
`locale`	`NumberFlowLocale`	`"en-US"`	Locale passed to `Intl.NumberFormat`.
`minimumFractionDigits`	`number`	—	Minimum fraction digits. Overrides the format default when set.
`maximumFractionDigits`	`number`	—	Maximum fraction digits. Overrides the format default when set.
`reducedMotion`	`"user" \| "always" \| "never"`	`"user"`	How `prefers-reduced-motion` is honoured. Defaults to `"user"` (snap). `"never"` always rolls digits — e.g. a showcase that must demonstrate it.