Trades tape
A React component in Beamline's Trading category.
Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
Use it for
- Beside the order book to show what is actually trading.
Not for
- The user's own fills → a data-grid or positions view.
Anatomy
- header (title, stale chip)
- column headers
- row (▲/▼ + price in side colour, size, time)
Variants
- density: compact (20px rows), default (24px), comfortable (28px)
- time: clock, relative
States
- live (new prints flash once in place)
- large print (side-tinted row, bold size)
- stale (caller's chip in the header; prints stay)
- empty
- Density: explicit instance prop, then scoped component default, then managed root density; omitted static-scope density stays inherited. Changes keep row identity and focus.
Keyboard
- Read-only table; no interactive parts.
Motion
A new print tints its row in its side's colour and fades over 600ms; rows never slide, so the eye stays on the numbers. Reduced motion: no fade, prints still arrive.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trades (required) | Trade[] | — | |
largeSize | number | — | |
limit | number | 30 | |
priceDecimals / sizeDecimals | number | — | |
time | 'clock'|'relative' | — | |
stale | ReactNode | — | Caller-owned stale description ("Stale · 12s"), shown as a warning chip with a clock in the header. |
density | 'compact'|'default'|'comfortable' | — | Row height 20 / 24 / 28 px (the order book's metrics). Omitted: follows the nearest scope's density; an explicit value wins. |
style / ref | CSSProperties / native Ref | — | |
classNames | TradesTapeClassNames | — |
Import
import { TradesTape } from "@/components/trades-tape/trades-tape";Get it
Trades tape 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.
- Price ticker: Symbol, last price with a directional flash, 24h change and stats.
- Ticker tape: A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
- Watchlist: A selectable, sortable list of markets with mini trends, prices, changes and stars.