# Ticker

Odometer-style number where only the digits that changed roll, up when the value rises and down when it falls, flashing green or red. An arrow shows the trend and it keeps up with live feeds.

> Primitive · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/ticker
```

## Import

```tsx
import { Ticker } from "@/components/ui/ticker/ticker";
```

## Variants

- `auction` — Live auction bid: `npx @lumioui/cli add pro/ticker-auction`
- `led` — LED desk board: `npx @lumioui/cli add pro/ticker-led`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | The number to display. Rolls when it changes. |
| `decimals?` | `number` | Decimal places. Default 0. |
| `grouped?` | `boolean` | Thousands separators. Default true. |
| `prefix?` | `string` | Static prefix (e.g. "$", "+"). |
| `suffix?` | `string` | Static suffix (e.g. "%", " pts"). |
| `size?` | `TickerSize` | Type scale, from a figure inside a sentence to a screen hero. Default "md". |
| `textClassName?` | `string` | Extra glyph classes (weight, ink). Size comes from `size`. |
| `digitHeight?` | `number` | Cell height override in pt. When set without `size`, the font size comes  from `textClassName` (the pre-`size` API). Reels only — ignored for  `face="led"`, whose dot size follows `size` (default "md"). |
| `tickHaptic?` | `boolean` | Selection haptic once a change has landed. Default false. Ignored when `live`. |
| `glowOnChange?` | `boolean` | Changed digits light for a beat as they land. Default true. |
| `tone?` | `"trend" | "accent"` | Colour of that beat: "trend" = success when up, destructive when down;  "accent" = the surrounding accent. Default "trend". |
| `arrow?` | `boolean` | Leading arrow that turns with the trend. Default false. |
| `trend?` | `"up" | "down" | "flat"` | Pin the arrow (and an up/down tone) instead of following each change —  e.g. the day's change rather than the last tick. |
| `live?` | `boolean` | Frequent updates: retarget in flight, no cascade, no haptic. Default false. |
| `lit?` | `boolean` | Hold the whole figure in a steady accent (e.g. your own leading bid). Default false.  Reels crossfade into the accent; `face="led"` switches the dot colour  directly, without the crossfade. |
| `announce?` | `boolean` | Announce the settled value politely to screen readers. Default true, false when `live`. |
| `locale?` | `string` | Number locale. Default "en-US". |
| `face?` | `"reel" | "led"` | "reel" (default) rolls each digit; "led" switches dot-matrix LEDs in place. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/ticker