# NumberTicker

Source: https://lumeo.nativ.sh/components/number-ticker

# NumberTicker

Animated count-up from zero to target number.

## When to Use

-   Animate dashboard KPI values on page load for visual impact.
-   Show real-time counter updates (e.g. active sessions, download counts).
-   Add currency or percentage context via the `Prefix` and `Suffix` props.

Preview Code

Basic Count-Up

0 0.0

Copy Code

Preview Code

With Prefix and Suffix

$0 0.0%

Copy Code

Preview Code

Custom Duration

0

Fast (500ms)

0

Slow (3000ms)

Copy Code

## API Reference

### NumberTicker

Property

Type

Default

Description

Value

double

0

Target value to animate to. Changing this triggers a new animation from the previous value.

StartValue

double

0

Initial value to count from on first render.

DurationMs

int

1500

Animation duration in milliseconds.

Decimals

int

0

Number of decimal places to display and animate through.

Prefix

string?

null

Text rendered before the number (e.g. `$`).

Suffix

string?

null

Text rendered after the number (e.g. `%`, `k`).

Class

string?

null

Additional CSS classes. Use Tailwind font/size utilities to style the number.

## Related Components

-   [KpiCard](/components/kpi-card) — Dashboard tile that can embed a NumberTicker as its value.
-   [Statistic](/components/statistic) — Big-number statistic display with label and unit.
-   [TextReveal](/components/text-reveal) — Word-by-word reveal animation on scroll.