Trading terminal

A React block (a whole screen) in Beamline's Blocks category.

A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account figures, positions and open orders. The terminal renders and calls the account; it never fills an order itself.

Use it for

The main screen of an exchange, broker or trading tool: pass your symbols, a `useFeed` hook around your market stream (`MarketFeed`) and an `account` on your order API (`TradingAccount`), both from @beamline/ui/lib/market. It arranges itself by its own width, from a four-column desk down to a phone column.

Not for

A portfolio overview without order entry (compose watchlist, positions-table and metric-card instead).

Anatomy

ticker tape
market header (market picker below 1400px, price ticker, 24h figures, funding)
watchlist (≥ 1400px)
chart with timeframe and chart type (entry, liquidation and order lines; plot stays LTR)
book / trades / depth
order ticket
account figures
positions / open orders tabs
phone: Book · Trades · Positions · Orders tabs, a sticky Buy / Sell bar and the ticket in a bottom sheet
toasts

Variants

layout (by the terminal's own width): wide ≥ 1400: watchlist · chart · book · ticket, positions under all but the watchlist, three 1024–1399: chart · book · ticket, watchlist in the Markets picker, two 640–1023: main column (header, chart 320, positions) and a 300px side (ticket, account, book), one < 640: one scrolling column (header in two rows, chart, tabs, account) with a Buy / Sell bar, short (< 800px tall, wide/three): ticket column full height, positions under chart and book

States

no positions
positions open
orders resting
order rejected (the account's message in the ticket; the phone sheet stays open)
close or cancel failed (toast)
fill announced (resting order reached)
market switched
phone ticket open (bottom sheet; closes when the account accepts the order)

Keyboard

every part keeps its own keyboard model: watchlist and book rows are roving lists (↑/↓, Enter)
tabs ←/→
Tab order follows the reading order: header, markets, chart, book, ticket, positions
phone: Buy / Sell open the ticket in a sheet with that side chosen; Escape or Close returns focus to the pressed button

Motion

No layout motion; the arrangement switches by width without animating. Prices flash per the price-ticker and order-book rules; the phone sheet slides in from the bottom (instant under reduced motion); toasts follow the toast stack and rise above the phone Buy / Sell bar. An order that changes the account sends a consequence trace (ui/lib/trace.ts) from the ticket to every figure it changed (the position's row, margin used, free margin, buying power); the figures change at once, the light only shows where. Reduced motion: each changed figure holds a ring instead.

Props

Prop	Type	Default	Description
`symbols`	`Ticker[]`	—
`useFeed`	`UseMarketFeed`	—	Streams the open market.
`account`	`TradingAccount`	—	Balance, positions, orders, fills and submitOrder / cancelOrder / closePosition; usePaperAccount in demo/paper-account is a labelled simulator.
`leverage`	`number`	—	Sizes buying power and margin figures.
`defaultSymbol`	`string`	—
`className`	`string`	—
`classNames`	`TradingTerminalClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLDivElement>`	—

Built from

Dependencies

lightweight-charts, d3-scale, d3-shape, lucide-react, motion

Import

import { TradingTerminal } from "@/blocks/trading-terminal/trading-terminal";

Get it

Trading terminal 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