# Count Up

> Animated number counter that counts or rolls like an odometer, with formatting, decimals and compact units.

A number that counts from one value to another when it scrolls into view. In `roll` mode every digit becomes a column that spins into place like an odometer, staggered per column, with a soft motion blur while it moves. It can settle with a spring, shorten big numbers to 1.2K or 3.4M, and replay when you hover it. Try the presets in the panel.

<demo-count-up>



</demo-count-up>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/count-up.json"
```

## Usage

```vue
<script setup lang="ts">
  import CountUp from '~/components/ui/count-up/CountUp.vue';

  function onEnd() {
    console.log('done');
  }
</script>

<template>
  <CountUp
    :from="0"
    :to="86420"
    mode="roll"
    easing="spring"
    separator=","
    :duration="2.4"
    replay-on-hover
    class="text-8xl font-semibold"
    @end="onEnd"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        to
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      The target number
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        from
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      The number the count starts from
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mode
      </code>
    </td>
    
    <td>
      <code>
        'count' | 'roll'
      </code>
    </td>
    
    <td>
      <code>
        'count'
      </code>
    </td>
    
    <td>
      <code>
        count
      </code>
      
       swaps the digits; <code>
        roll
      </code>
      
       spins each digit column like an odometer
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        easing
      </code>
    </td>
    
    <td>
      <code>
        'easeOut' | 'linear' | 'expo' | 'spring'
      </code>
    </td>
    
    <td>
      <code>
        'easeOut'
      </code>
    </td>
    
    <td>
      Pace of the count. <code>
        spring
      </code>
      
       overshoots slightly and settles on the final number
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        format
      </code>
    </td>
    
    <td>
      <code>
        'standard' | 'compact'
      </code>
    </td>
    
    <td>
      <code>
        'standard'
      </code>
    </td>
    
    <td>
      <code>
        compact
      </code>
      
       shortens large numbers to 1.2K, 3.4M or 5.6B
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        decimals
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Fixed decimals. When unset it follows the decimals in <code>
        from
      </code>
      
       and <code>
        to
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        direction
      </code>
    </td>
    
    <td>
      <code>
        'up' | 'down'
      </code>
    </td>
    
    <td>
      <code>
        'up'
      </code>
    </td>
    
    <td>
      <code>
        down
      </code>
      
       swaps <code>
        from
      </code>
      
       and <code>
        to
      </code>
      
       to count down
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger
      </code>
    </td>
    
    <td>
      <code>
        'view' | 'load'
      </code>
    </td>
    
    <td>
      <code>
        'view'
      </code>
    </td>
    
    <td>
      <code>
        view
      </code>
      
       starts when the number scrolls into view, <code>
        load
      </code>
      
       starts right away
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        replay-on-hover
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Replay on hover. In roll mode every column spins once more and lands on the same number
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Seconds before the count starts
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      How long the count takes, in seconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        start-when
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The count only starts while this is <code>
        true
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        separator
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Thousands separator
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        prefix
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Text before the number, like a currency sign
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        suffix
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Text after the number, like a percent sign or a unit
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes on the root; size and weight the number with text utilities or <code>
        style
      </code>
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        start
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      The count animation started
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        end
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      The count animation finished
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- In roll mode the spinning columns are `aria-hidden`; a visually hidden copy of the final number is read instead.
- With `prefers-reduced-motion: reduce` the number jumps straight to its final value.
- Digits use `tabular-nums`, so the width does not jitter while counting.
- Ported from [React Bits](https://reactbits.dev/text-animations/count-up) by David Haz.