---
title: Counting Number
description: A numeric display component that smoothly animates number changes with a counting animation.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="counting-number-demo" />

## Installation

<ComponentInstallation name="counting-number" />

## Usage

```tsx
<CountingNumber number={1000} />
```

## Examples

### With decimal

<ComponentPreview name="counting-number-decimal-demo" />

### Starting from a specific number

<ComponentPreview name="counting-from-number-demo" />

## Props

<TypeTable
  type={{
    number: {
      description: 'The number to display',
      type: 'number',
      required: true,
    },
    fromNumber: {
      description: 'The number to start from',
      type: 'number',
      required: false,
      default: '0',
    },
    padStart: {
      description: 'Whether to pad the number with leading zeros',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inView: {
      description: 'Enable animation when in view.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inViewMargin: {
      description: 'The margin of the in view.',
      type: 'string',
      required: false,
      default: '0px',
    },
    inViewOnce: {
      description: 'Enable animation when in view once.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    decimalSeparator: {
      description: 'The decimal separator to use',
      type: 'string',
      required: false,
      default: '.',
    },
    transition: {
      description: 'The transition to use for the animation',
      type: 'object',
      required: false,
      default: '{ stiffness: 90, damping: 50 }',
    },
    decimalPlaces: {
      description: 'The number of decimal places to display',
      type: 'number',
      required: false,
      default: '0',
    },
  }}
/>

## Credits

- Credits to [Motion](https://examples.motion.dev/react/html-content) for the inspiration
- Credits to [Magic UI](https://magicui.design/docs/components/number-ticker) for the spring transition