Spring-based animated number component that smoothly transitions between values.

CountingNumber

A spring-physics animated number display that smoothly transitions between values. Used internally by DataCardValue for animated metric displays.

Import

import { CountingNumber } from '@mks2508/mks-ui/react';

Basic Usage

000

.tsx

<div className="space-y-4">
<CountingNumber number={1234} />
<CountingNumber number={9999} className="text-3xl font-bold" />
<CountingNumber number={42} className="text-cyan-400" />
</div>

With Formatting

Decimal Formatting

$0.00

0.0%

.tsx

<div className="space-y-4">
<div className="flex items-baseline gap-1">
  <span className="text-muted-foreground">$</span>
  <CountingNumber number={45678.9} decimalPlaces={2} />
</div>
<div className="flex items-baseline gap-1">
  <CountingNumber number={99.9} decimalPlaces={1} />
  <span className="text-muted-foreground">%</span>
</div>
</div>

With Pad Start

Padded Numbers

0.00

.tsx

<div className="font-mono text-2xl">
<CountingNumber number={7} padStart decimalPlaces={2} />
</div>

Animation

The component uses spring physics from motion/react for natural-feeling number transitions:

Numbers count up/down with spring easing
Large value changes animate smoothly
The animation is performant and doesn't cause layout shifts

Custom Spring

<CountingNumber
  number={1234}
  transition={{
    stiffness: 150,
    damping: 20,
  }}
/>

Integration with DataCard

DataCardValue uses CountingNumber internally:

<DataCard>
  <DataCardValue number={1234} label="$" decimalPlaces={2} />
</DataCard>

API Reference

Prop	Type	Default	Description
`number`	`number`	—	The target number to display
`decimalPlaces`	`number`	`0`	Number of decimal places
`padStart`	`boolean`	`false`	Pad with leading zeros
`transition`	`SpringOptions`	—	Spring animation config
`className`	`string`	—	Additional CSS classes

CountingNumber

On this page