Animated Number

A number that rolls up or down to its new value when it changes, such as a price or a total.

Dependenciesmotion

$95/ month

5 seats

Installation#

pnpm dlx shadcn@latest add @balick/animated-number

Or pass the full URL: https://ui.balick.me/r/animated-number.json

Usage#

import { AnimatedNumber } from "@/components/ui/animated-number"

export function Price({ amount }: { amount: number }) {
  return (
    <p className="text-4xl font-semibold">
      $<AnimatedNumber value={amount} />
    </p>
  )
}

Props#

Prop	Type	Default	Description
`value` The number to display. Required.	`number`	—	The number to display. Required.
`format` Turns the value into text. Defaults to en-US digit grouping.	`(value: number) => string`	—	Turns the value into text. Defaults to en-US digit grouping.