Components/Ticker
Ticker
Compact price chip — symbol, last price, change, optional sparkline and volume. Pair with TickerMarquee to build a horizontal price tape that pauses on hover and respects prefers-reduced-motion.
AAPL
$189.42 +1.84%
TSLA
$178.20 -2.10%
NVDA
$880.10 +3.81%
Installation
npx ajaxui add tickerSizes
AAPL
$189.42 +1.84%
AAPL
$189.42 +1.84%
AAPLVol 48M
$189.42 +1.84%
Absolute change
By default change is a percent. Set changeType="absolute" to render a currency delta — useful for FX pairs and high-priced assets.
AAPL
$189.42 +$3.42
BTC
$71,250.00 +$1,620.00
EUR/USD
$1.08 -$0.00
Marquee
Bloomberg-style horizontal tape. The strip duplicates the list once and loops with CSS (no JS animation frame), pauses on hover and focus by default, and stops entirely under prefers-reduced-motion.
AAPLVol 48M
$189.42 +1.84%
MSFTVol 21M
$410.00 +0.42%
TSLAVol 85M
$178.20 -2.10%
NVDAVol 39M
$880.10 +3.81%
AMZNVol 33M
$178.30 +0.71%
METAVol 15M
$504.20 -1.02%
GOOGVol 25M
$178.20 +0.83%
BTCVol 1.2M
$71,250.00 +2.34%
ETHVol 4.8M
$3,580.00 -0.81%
AAPLVol 48M
$189.42 +1.84%
MSFTVol 21M
$410.00 +0.42%
TSLAVol 85M
$178.20 -2.10%
NVDAVol 39M
$880.10 +3.81%
AMZNVol 33M
$178.30 +0.71%
METAVol 15M
$504.20 -1.02%
GOOGVol 25M
$178.20 +0.83%
BTCVol 1.2M
$71,250.00 +2.34%
ETHVol 4.8M
$3,580.00 -0.81%
Reverse direction + faster
AAPLVol 48M
$189.42 +1.84%
MSFTVol 21M
$410.00 +0.42%
TSLAVol 85M
$178.20 -2.10%
NVDAVol 39M
$880.10 +3.81%
AMZNVol 33M
$178.30 +0.71%
METAVol 15M
$504.20 -1.02%
GOOGVol 25M
$178.20 +0.83%
BTCVol 1.2M
$71,250.00 +2.34%
ETHVol 4.8M
$3,580.00 -0.81%
AAPLVol 48M
$189.42 +1.84%
MSFTVol 21M
$410.00 +0.42%
TSLAVol 85M
$178.20 -2.10%
NVDAVol 39M
$880.10 +3.81%
AMZNVol 33M
$178.30 +0.71%
METAVol 15M
$504.20 -1.02%
GOOGVol 25M
$178.20 +0.83%
BTCVol 1.2M
$71,250.00 +2.34%
ETHVol 4.8M
$3,580.00 -0.81%
Ticker props
| Prop | Type | Default | Description |
|---|---|---|---|
| symbol | string | — | Ticker symbol displayed in mono. |
| price | number | — | Last trade price. |
| change | number | — | Change as a percent or absolute amount. |
| changeType | "absolute" | "percent" | "percent" | Interpret `change` as currency or %. |
| series | number[] | — | Sparkline data. |
| volume | number | — | Trading volume (compact-formatted). |
| currency | string | "USD" | ISO 4217 currency code. |
| locale | string | "en-US" | Locale for Intl formatting. |
| size | "sm" | "md" | "lg" | "md" | Footprint. |
| onClick | () => void | — | Makes the ticker a focusable button. |
TickerMarquee props
| Prop | Type | Default | Description |
|---|---|---|---|
| tickers | TickerProps[] | — | Tickers to render. Duplicated internally. |
| speed | number | 40 | Scroll speed in px/s. |
| pauseOnHover | boolean | true | Pause animation on hover. |
| pauseOnFocus | boolean | true | Pause when a ticker is focused (a11y). |
| direction | "left" | "right" | "left" | Scroll direction. |
| fade | boolean | true | Apply a gradient mask at the edges. |