# Trading terminal

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/trading-terminal

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](https://beamline.io/components/positions-table) and [metric-card](https://beamline.io/components/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

- [ticker-tape](https://beamline.io/components/ticker-tape)
- [price-ticker](https://beamline.io/components/price-ticker)
- [funding-countdown](https://beamline.io/components/funding-countdown)
- [segmented-control](https://beamline.io/components/segmented-control)
- watchlist
- [price-chart](https://beamline.io/components/price-chart)
- tabs
- [order-book](https://beamline.io/components/order-book)
- [trades-tape](https://beamline.io/components/trades-tape)
- [depth-chart](https://beamline.io/components/depth-chart)
- [order-ticket](https://beamline.io/components/order-ticket)
- [positions-table](https://beamline.io/components/positions-table)
- table
- button
- toast
- sheet
- popover
- [empty-state](https://beamline.io/components/empty-state)

## Dependencies

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

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Blocks

- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with…
- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- [CRM pipeline](https://beamline.io/components/crm): A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…