NumberFlow

for v0.5.5

321

An animated number component for Solid. Dependency-free. Accessible. Customizable.

Ported from number-flow.barvian.me

npm install solid-number-flow

Continuous

The continuous plugin makes the number transitions appear to pass through in-between numbers.

continuous

120

Click anywhere to change numbers

import NumberFlow, { continuous } from 'solid-number-flow'

<NumberFlow
  plugins={[continuous]}
  value={value}
/>

Trend

Controls the direction of the digits.

20

Click anywhere to change numbers

<NumberFlow
  trend={trend}
  value={value}
/>

Timings

Customize animation timings for transforms, spins, and opacity.

124.23

Click anywhere to change numbers

<NumberFlow
  transformTiming={{ duration: 750, easing: 'linear(...)' }}
  spinTiming={{ duration: 750, easing: 'linear(...)' }}
  opacityTiming={{ duration: 350, easing: 'ease-out' }}
  value={value}
/>

Suffix & Prefix

Add custom prefix or suffix to the number.

$3/mo

Click anywhere to change numbers

<NumberFlow
  value={value}
  format={{ style: 'currency', currency: 'USD', trailingZeroDisplay: 'stripIfInteger' }}
  suffix="/mo"
/>

Isolate

Isolate transitions from layout changes.

isolate

42%

Click anywhere to change numbers

<NumberFlow
  isolate={isolate}
  value={value}
  format={{ style: 'percent' }}
/>

Styling

Style specific parts of the component using CSS ::part.

$3/mo

Click anywhere to change numbers

number-flow::part(suffix) {
  margin-left: .0625em;
  font-weight: normal;
  font-size: 0.75em;
  color: var(--muted);
}

Grouping

Sync transitions between multiple components.

$124.23

+5.64%

Click anywhere to change numbers

import NumberFlow, { NumberFlowGroup } from 'solid-number-flow'

<NumberFlowGroup>
  <div
    style={{ "--number-flow-char-height": "0.85em" }}
    class="flex items-center gap-4 font-semibold"
  >
    <NumberFlow
      value={value}
      locales="en-US"
      format={{ style: 'currency', currency: 'USD' }}
      class="~text-2xl/4xl"
    />
    <NumberFlow
      value={diff}
      locales="en-US"
      format={{ style: 'percent', maximumFractionDigits: 2, signDisplay: 'always' }}
      class={cn(
        "~text-lg/2xl transition-colors duration-300",
        diff < 0 ? "text-red-500" : "text-emerald-500"
      )}
    />
  </div>
</NumberFlowGroup>

Tabular Nums

Ensure all numbers are the same width to prevent shifting.

tabular-nums

10

Click anywhere to change numbers

<NumberFlow
  style={{
    fontVariantNumeric: tabularNums ? 'tabular-nums' : undefined
  }}
  value={value}
/>