Market terminal
ProA brokerage app screen where the sidebar switches accounts, pages and watchlists. The trade page has a live candlestick chart, a positions, orders and activity panel, an order ticket and a watchlist you can reorder, and positions, orders and activity also open as full pages with an account summary and a position detail drawer.
Live screen · 1440 × 900
- A trading or investing product that needs a full app screen: accounts, watchlists, a chart, an order ticket and the portfolio in one place.
- A paper trading or education app where people practice placing market and limit orders against moving prices and watch their positions change.
- A markets dashboard where candles, volume and moving averages must be inspected bar by bar next to holdings.
- Use order-book-depth to show bids and asks at each price level.
- Use metric-explorer or a line chart for product or business metrics without open, high, low and close.
- Use options-payoff to model an options position's profit at expiry.
- Use screen-shell directly when you need the app frame without the trading content.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Render <MarketTerminal /> for the demo, or pass symbols, holdings, buyingPower, orders, defaultTicker and defaultRange with your own data. Pass onPlaceOrder and onCancelOrder (they can return promises) to connect it to a real order API.
example.tsx
import { MarketTerminal } from "@/components/arc/blocks/market-terminal/market-terminal"; export function Brokerage() { return ( <div style={{ height: "100dvh" }}> <MarketTerminal defaultTicker="AAPL" defaultRange="1D" onPlaceOrder={order => api.orders.create(order)} onCancelOrder={order => api.orders.cancel(order.id)} /> </div> );}MarketTerminal
A full brokerage screen inside the screen shell, for a sample broker called Kestrel. The sidebar switches accounts, holds the four pages, a live reorderable watchlist with a list switcher, and the account value; the trade page charts one symbol full height with candles, volume, moving averages and a crosshair readout, beside an order ticket and the open orders. Positions, orders and activity open as full pages with an account summary and a position detail drawer.
PropTypeDefaultDescription
symbolsMarketSymbol[]SYMBOLSEvery symbol the screen can quote: ticker, name, exchange, price, previous close, daily volatility (a fraction such as .02), average daily volume, and optionally market cap and P/E for the quote header. Candles are generated from these, deterministically per ticker and range.watchlistsWatchlist[]WATCHLISTSWatchlists in the sidebar, each an id, a name and tickers from symbols; a menu above the rows switches between them. When you pass your own symbols without watchlists, one list holds them all. Viewers can add lists, add or remove the charted symbol from the header star, and reorder rows.accountsBrokerageAccount[]ACCOUNTSAccounts in the workspace switcher, each with holdings (shares and average cost), buying power, orders and activity. Without it, holdings, buyingPower and orders make a single account.holdingsHolding[]HOLDINGSShares and average cost per ticker for the single account. The ticket shows the position and blocks selling more than is held.buyingPowernumber24860.35Cash available for buys in the single account. The ticket blocks a buy that costs more, and fills update it.ordersOrderRecord[]ORDERSOrders for the single account, newest first: side, type, ticker, shares, price, status (filled, working or canceled) and time.user{ name: string; detail?: string; avatar?: string }–The signed in person at the bottom of the sidebar. Defaults to a sample person with a seeded gradient avatar.defaultTickerstring–Ticker charted on first render. Defaults to the first symbol of the first watchlist.defaultRange"1D" | "5D" | "1M" | "6M" | "1Y""6M"Time range on first render. 1D and 5D use 5 and 30 minute candles; the rest are daily.defaultPage"trade" | "positions" | "orders" | "activity""trade"Page on first render.defaultAveragesAverageId[]["ma20", "ma50"]Moving averages drawn on first render. Viewers toggle them in the toolbar.livebooleantrueStreams simulated ticks. Viewers can still pause and resume them from the header.tickIntervalnumber1200Milliseconds between simulated ticks.onPlaceOrder(order: OrderRequest) => void | Promise<void>–Called when an order is submitted with its side, type, ticker, shares and price. Return a promise to keep the button pending; a rejection leaves the order unplaced and says so under the button.onCancelOrder(order: OrderRecord) => void | Promise<void>–Called when a working order is canceled from an orders list.classNamestring–Class on the root element.- ⌘KorCtrl+K
- Focuses the sidebar search, which filters the pages in place.
- Arrow uporArrow down, HomeorEnd
- In the watchlist and in position rows, moves between rows. Enter or Space charts the focused symbol, or opens its details on the positions page.
- Alt+Arrow upordown
- In the watchlist, moves the focused symbol up or down the list.
- Arrow leftorArrow right
- On the range and filter controls, moves to and selects the next option. On the chart, moves the crosshair one candle and reads it out.
- Shift+Arrow leftorright
- On the chart, moves the crosshair ten candles.
- HomeorEnd
- On the chart, jumps to the first or the live candle.
- +or-, 0
- On the chart, zooms in or out around the crosshair, or resets the view.
- Escape
- Clears the chart crosshair, or closes the position drawer and returns focus to its row.
- The shell gives the sidebar a navigation landmark with the current page marked; the account and page show in the header trail.
- The chart is a focusable image with a role description, a label naming the symbol, range and candle interval, and a description of its keys. Moving the crosshair with the keyboard announces the candle through a polite live region.
- Watchlist rows are buttons with a full label (ticker, name, price and change today) and advertise their reorder keys; the charted symbol carries aria-current.
- Positions are a real table with sortable column headers (aria-sort); each row's symbol cell is a button. Order status is a badge with an icon and a word, and activity type is written as text.
- The position drawer is a labelled dialog: focus moves into it, Escape closes it, and focus returns to the row that opened it.
- Direction is never color alone: changes carry a sign and an arrow. Order problems and failures are written in a status line under the button.
- The chart is one canvas drawn in a requestAnimationFrame loop that runs only while something moves; zoom, pan and range changes ease without overshoot, and a drag flick carries momentum.
- Live ticks glide the last candle and the price line, roll the header price with the animated counter, and flash watchlist prices with a single opacity fade.
- The charted watchlist row fills in place, hover fills are instant, and the keyboard moves focus without travel. Dragging a row lets the others close the gap on the smooth spring.
- Pages swap with one short crossfade. The position drawer slides in over the ticket column, so nothing else on the page moves; it exits faster than it enters. Open orders fade out when canceled or filled.
- The limit field opens with height and opacity together. Buttons press to 0.97 on the snappy spring, and live status is a static icon, not a loop.
- Reduced motion makes the view, prices, drawer and pages change at once, drops momentum, and holds the flash as a brief static tint.
- From 900px the shell sidebar sits beside the page; below that it opens as a sheet from the menu button, and below 600px the page goes edge to edge.
- From 880px the ticket and open orders hold a 332px column beside the full height chart, each region scrolling on its own with hidden bars and edge fades.
- Below 880px the page scrolls as one: quote, chart, then the ticket and open orders side by side; below 600px everything is one column and the quote stats sit in four equal columns. The watchlist lives in the sidebar sheet, and picking a symbol closes it.
- Below 1080px less critical columns (average cost, time, allocation, market cap, P/E) drop out; on phones the day and total return columns follow. The drawer becomes a full-height sheet.
- Touch drags pan the chart while vertical swipes scroll the page; watchlist grips stay visible on touch screens.
- Candles, volume, averages and the crosshair draw on one canvas at up to 2x device pixel ratio, only for the visible candles; readouts are written straight into text nodes.
- Series are generated once per symbol and range and then updated in place by ticks; moving averages are one running sum.
- Ticks pause while the tab is hidden or the viewer is signed out, and theme or accent changes recolor the canvas without rebuilding it.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for the main screen of a brokerage, a paper trading app or an internal markets tool: one symbol charted and traded at a time, with the account around it.
- It fills its parent, so give the parent a definite height (the preview frame, a 100dvh wrapper, or a grid cell). Long pages scroll inside the screen, never the window.
- Everything is simulated: candles come from each symbol's price, previous close and volatility, ticks are a random walk, and orders fill against the live price locally, updating holdings, average cost, buying power and activity.
- Working limit orders fill on their own when the live price crosses them, in every account, and a marketable limit fills at the better of the limit and the market.
- Company marks are Simple Icons (CC0) drawn inline as sample content; unknown tickers get a quiet letter mark. The Kestrel workspace mark is ScreenShellMark's terrace on a tone per account.
The full library index for assistants is at /llms.txt.