Animated Number

Display

Number counter with smooth easing animation on value change.

Click to animate

1,234,567123456.7%#12346

Instalação via CLI

$ npx kikitocn add animated-number

Exemplo de uso

Animated NumberExample.tsx

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

export function AnimatedNumberExample() {
  return (
    <AnimatedNumber value={1234} duration={800} />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value*`	`number`	—	Valor numérico a exibir
`duration`	`number`	`800`	Duração da animação (ms)
`format`	`(value: number) => string`	—	Formatador do valor exibido
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…