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

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 3/3Pixel diff 0 pxLogic 1/1Parity scoreboard

currency.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component NumberFlowCurrency layout:inline style:number-flow {
  value:1234.5
  prefix:"$"
  format:"currency"
  label "currency"
}

page "/audit/number-flow/currency" type:custom {
  use NumberFlowCurrency
}

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component NumberFlowDefault layout:inline style:number-flow {
  value:1234
  label "default"
}

page "/audit/number-flow/default" type:custom {
  use NumberFlowDefault
}

percentage.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component NumberFlowPercentage layout:inline style:number-flow {
  value:0.425
  format:"percentage"
  locale:"de-DE"
  label "percentage"
}

page "/audit/number-flow/percentage" type:custom {
  use NumberFlowPercentage
}

API Reference

Generated from the component's exported types.

NumberFlowProps

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

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	Ref forwarded to the underlying DOM node.
`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.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.