Price ticker
A React component in Beamline's Trading category.
Symbol, last price with a directional flash, 24h change and stats.
Use it for
- The header of a market or a watch tile.
Not for
- A scrolling row of many symbols → ticker-tape.
Anatomy
- symbol and name
- price (last-move arrow + colour, flashes once)
- 24h change chip (tint, ▲/▼, sign)
- stale chip (caller's words)
- stats (24h high, low, volume)
Variants
- layout: bar, card
States
- live (price coloured by its last move, with ▲/▼)
- flat (no move yet: ink, no arrow)
- stale (warning chip with a clock; figures stay readable)
- no data (— in ink-3, no change chip; never 0)
Keyboard
- Read-only.
Motion
A moved price tints in its direction's colour and fades over 600ms; its arrow and colour stay until the next move. Nothing slides or counts. Reduced motion: no tint fade, values still update.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
symbol (required) | string | — | |
price (required) | number | null | — | |
change | number | null (fraction) | — | |
high / low / volume | number | null | — | |
decimals | number | — | |
layout | 'bar'|'card' | — | |
stale | ReactNode | — | Caller-owned stale description ("Stale · 12s"), shown as a warning chip with a clock beside the price. |
style / ref | CSSProperties / native Ref | — | native HTMLDivElement |
classNames | PriceTickerClassNames | — |
Import
import { PriceTicker } from "@/components/price-ticker/price-ticker";Get it
Price ticker is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Trading
- Depth chart: Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
- Funding countdown: Perpetual funding rate with who pays, and a live countdown ring to the next funding.
- Market heatmap: Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
- Order book: Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.
- Order ticket: Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
- Positions table: Open positions with live unrealised PnL, liquidation warnings and close actions.
- Price chart: Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
- Ticker tape: A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
- Trades tape: Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
- Watchlist: A selectable, sortable list of markets with mini trends, prices, changes and stars.