Watchlist
A React component in Beamline's Trading category.
A selectable, sortable list of markets with mini trends, prices, changes and stars.
Use it for
- The market switcher in a terminal sidebar.
Not for
- Hundreds of instruments with filters → data-grid.
Anatomy
- header (sort buttons aligned over their columns; sorted one in ink with an arrow icon)
- row (star, symbol and name, mini trend, price, 24h change chip)
- star (24px target, filled when on)
- 24h change chip (tint + ▲/▼ + signed %)
- empty text
Variants
- trend: on, off
States
- rest
- row hover (tint, 0ms in / --pui-motion-out out)
- row focus (inset ring)
- selected (accent tint + 2px accent-ink edge at the inline start, text in ink)
- sorted ascending / descending
- starred (filled orange star, floats to the top)
- missing price or change (—)
- empty
- narrow (container ≤300px, e.g. a terminal's 272–304px rail): the mini trend gives way to symbol and figures
- narrowest (container ≤248px, a phone popover or collapsed rail): the 24h chip moves under the price; symbols stay whole down to 200px
Keyboard
- listbox: ↑/↓, Home/End, Enter/Space selects
- Headers are buttons that cycle ascending → descending → off; their names say the current direction
- S stars or unstars the focused market when stars are shown (the star button itself stays out of the tab order)
- The roving tab stop follows the market symbol when starring or sorting changes its row index; ArrowDown continues from that symbol in the new order.
Motion
A sort re-flows the rows to their new places; the selected market's tint and rule are one plate that travels to the next market chosen. Hover arrives at 0ms and leaves over --pui-motion-out. Live prices update in place; a price tick never moves a row.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items (required) | Ticker[] | — | |
value / defaultValue / onValueChange | string | — | |
starred / onStarredChange | string[] | — | |
style / ref | CSSProperties / native Ref | — | |
classNames | WatchlistClassNames | — |
Dependencies
lucide-react
Import
import { Watchlist } from "@/components/watchlist/watchlist";Get it
Watchlist 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.
- Trades tape: Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.