# Number Ticker

> Roll changing digits independently while preserving place value.

Source: https://www.honestui.com/docs/animated/number-ticker

```tsx
"use client";

import { useState } from "react";

import { NumberTicker } from "@/registry/default/animated/number-ticker";

export function NumberTickerDemo() {
  const [value, setValue] = useState(8360);

  return (
    <button
      type="button"
      onClick={() => setValue((current) => current + 185)}
      className="rounded-2xl border bg-card px-8 py-6 text-left shadow-sm"
    >
      <span className="text-muted-foreground block text-xs font-medium uppercase">Weekly sales</span>
      <NumberTicker value={value} prefix="$" locale blur className="mt-2 block text-4xl font-semibold tabular-nums" />
      <span className="text-muted-foreground mt-3 block text-xs">Click to add $185</span>
    </button>
  );
}

```

## Overview [#overview]

Number Ticker animates each numeric place without re-keying the rest of the value. Use it for metrics whose changes matter, such as balances, counts, scores, or progress totals.

## Installation [#installation]

<CliBlock commands="[&#x22;number-ticker&#x22;]" />

## Usage [#usage]

```tsx
import { NumberTicker } from "@/components/animated/number-ticker"

<NumberTicker value={8360} prefix="$" locale />
```

## Accessibility [#accessibility]

Assistive technology receives the complete formatted value instead of individual visual digits. Keep updates at a readable pace and avoid using rapid rolls for critical live data.

## API Reference [#api-reference]


  ### `value`

type: `number`

Value to display, rounded to an integer.

  ### `pad`

type: `number`

Minimum number of digits.

  ### `duration`

type: `number` · default: `0.9`

Per-digit roll duration in seconds.

  ### `stagger`

type: `number` · default: `0.04`

Delay between digit places.

  ### `prefix`

type: `string`

Text before the value.

  ### `suffix`

type: `string`

Text after the value.

  ### `locale`

type: `boolean`

Adds locale group separators.

  ### `blur`

type: `boolean` · default: `false`

Adds a small blur during rolls.