Ticker

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/ticker

Usage

import { Ticker } from "@/components/ui/ticker/ticker";
<Ticker />

Examples

Live auction bid

The live bid on an estate-sale lot, in teal.

LED desk board

A commodities desk board in dot-matrix LEDs, in amber.

API reference

Prop Type Default
value* number

The number to display. Rolls when it changes.

 —
decimals number

Decimal places. Default 0.

 0
grouped boolean

Thousands separators. Default true.

 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.

 false
glowOnChange boolean

Changed digits light for a beat as they land. Default true.

 true
tone "trend" | "accent"

Colour of that beat: "trend" = success when up, destructive when down; "accent" = the surrounding accent. Default "trend".

 "trend"
arrow boolean

Leading arrow that turns with the trend. Default false.

 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.

 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.

 false
announce boolean

Announce the settled value politely to screen readers. Default true, false when live.

 —
locale string

Number locale. Default "en-US".

 "en-US"
face "reel" | "led"

"reel" (default) rolls each digit; "led" switches dot-matrix LEDs in place.

 "reel"
className string —