Display@knitui/components

RollingNumber

An animated number whose digits roll between values. Supports prefix/suffix, thousands and decimal separators, configurable animation duration, and tabular (monospace) digit alignment. Respects the user's reduced-motion preference by snapping instead of rolling.

WebiOSAndroid3 style slots11 own props10 examples

Stories Source Tests Open in Storybook

import { RollingNumber } from "@knitui/components";

Playground

Loading playground…

valueThe number value to display.

fontSizeDigit font size. Standard values resolve against the fontSize scale; numbers are custom px sizes.

animationDurationRoll animation duration in ms (0 disables animation).

tabularNumbersUse monospace digits so columns stay aligned.

true

withLiveRegionAnnounces changes to screen readers via an aria-live region.

false

prefix

suffix

decimalSeparator

thousandSeparator

decimalScale

fixedDecimalScale

false

Playground

<RollingNumber
  value={1234}
  fontSize="xxl"
  animationDuration={600}
  tabularNumbers
  withLiveRegion={false}
/>

Examples

Font Sizes

Full font-size token scale shown side by side to illustrate the sizing knob.

Loading example…

Font SizesSource Storybook

Custom Font Size

Numeric custom font size remains available for exact animation geometry.

Loading example…

Custom Font SizeSource Storybook

With Prefix And Suffix

Prefix and suffix characters rendered statically around the rolling digits.

Loading example…

With Prefix And SuffixSource Storybook

Formatted Number

Thousands separator groups digits for large numbers; decimal scale fixes the fractional part.

Loading example…

Formatted NumberSource Storybook

Negative Value

Negative value — the minus sign renders as a static character slot.

Loading example…

Negative ValueSource Storybook

Animated Counter

A controlled counter that increments and decrements so you can watch the roll animation.

Loading example…

Animated CounterSource Storybook

Live Region

Live region mode announces every value change to screen readers.

Loading example…

Live RegionSource Storybook

No Animation

Animation disabled (duration=0) — digits snap immediately without rolling.

Loading example…

No AnimationSource Storybook

Styles

Per-slot styles targets individual parts — here the digitViewport and digitText.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`value` required	`number`	`1234`	The number value to display.
`animationDuration`	`number \| undefined`	`600`	Roll animation duration in ms (0 disables animation).
`decimalScale`	`number \| undefined`	—	Number of decimal places to display.
`decimalSeparator`	`string \| undefined`	`"."`	Decimal separator character.
`disabled` system	`boolean \| undefined`	—
`fixedDecimalScale`	`boolean \| undefined`	`false`	Pad trailing zeros to match `decimalScale`.
`fontSize`	`number \| RollingNumberFontSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"xxl"`	Digit font size. Standard values resolve against the fontSize scale; numbers are custom px sizes.
`prefix`	`string \| undefined`	—	Prefix rendered before the value.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<RollingNumberStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching digit-column parts.
`suffix`	`string \| undefined`	—	Suffix rendered after the value.
`tabularNumbers`	`boolean \| undefined`	`true`	Use monospace digits so columns stay aligned.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`thousandSeparator`	`string \| boolean \| undefined`	`false`	Thousands separator; `true` uses `,`.
`withLiveRegion`	`boolean \| undefined`	`false`	Announces changes to screen readers via an aria-live region.

Style slots

Every part of RollingNumber can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`digitStrip`	`styles={{ digitStrip: { … } }}`
`digitText`	`styles={{ digitText: { … } }}`
`digitViewport`	`styles={{ digitViewport: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.