Delphi Design

Display numbers with smooth counting animations. Supports multiple formats.

Demo

Default

1,234

Compact

50K

Currency

$99.99

Percentage

75%

Usage

import { AnimatedNumber } from "@delphi/ui";

export function Example() {
  return (
    <div className="flex gap-8">
      <AnimatedNumber value={1234} />
      <AnimatedNumber value={50000} format="compact" />
      <AnimatedNumber value={99.99} format="currency" />
      <AnimatedNumber value={0.75} format="percent" />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`value`	`number`	Required	The number to display
`format`	`"default" \| "compact" \| "currency" \| "percent"`	`"default"`	Number format style
`locale`	`string`	`"en-US"`	Locale for number formatting
`currency`	`string`	`"USD"`	Currency code (when format is "currency")
`animateFromZero`	`boolean`	`false`	Animate from zero on initial mount
`formatOptions`	`Intl.NumberFormatOptions`	-	Custom number format options
`className`	`string`	-	Additional CSS classes

Use for metrics, counters, prices, and stats that update

Add animateFromZero for dashboard counters that should count up on load

Use the appropriate format for the data type

Animate numbers that change every frame — the animation needs time to complete

Use for static numbers that never change