Market Terminal
Prov1.0.0A candlestick chart, watchlist and trade ticket with live prices and order guards.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { MarketTerminal, type MarketSymbol, type OrderRequest } from "@/components/ui/notchset/blocks/market-terminal";
export function Terminal({ symbols }: { symbols: MarketSymbol[] }) {
return (
<MarketTerminal
symbols={symbols}
holdings={{ RLY: 120 }}
buyingPower={24860.35}
onOrder={async (order: OrderRequest) => {
const res = await fetch("/api/orders", { method: "POST", body: JSON.stringify(order) });
return ((await res.json()) as { status: "filled" | "working" }).status;
}}
/>
);
}Props
symbols–{ ticker, name, price, prevClose, open, high, low, volume, series }[]series maps each range id to candles { t, o, h, l, c, v }; the last candle follows price.
holdings / buyingPower–Record<ticker, number> / numberWhat the ticket checks orders against; filled orders update both.
live / onLiveChange–boolean / (live) => voidThe LIVE / PAUSED button; stream quotes into symbols while live.
onOrder / onCancel–(order) => Promise<'filled' | 'working'> / (order) => voidPlace and cancel orders on your broker (simulated by default).
ranges / exchange / note–{ id, label }[] / string / stringRange control (1D–1Y), the exchange line and the ticket's footnote.
Anatomy
- Green and red appear only in this block: the system's one market-colour exception.
- Market orders fill and update holdings and buying power; limit orders stay WORKING until cancelled.
- The newest four orders are kept.
MarketTerminaldata-slot="market-terminal"Header, chart with readout, watchlist and trade ticket.
Source
components/ui/notchset/blocks/market-terminal.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/market-terminalNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A brokerage or paper-trading screen
- Showing a symbol's price history with a place-an-order flow
Use something else when
- A plain price line: use a line chart
- Order books and depth: this has no level-2 view
Mistakes to avoid
- Throttle quotes to about one update a second; every update rolls
- Enforce buying power and holdings on the server too
Agents find it by
- trading terminal, stock chart, candlestick, watchlist, order ticket, brokerage, crypto exchange, paper trading, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/market-terminal.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- ↑ ↓
- Change symbol in the watchlist; change shares on the stepper
- Page Up / Page Down
- Shares ±10
- ← →
- Change range, side or order type
Accessibility
- The watchlist is a listbox (↑ ↓ and Enter); the share count is a spinbutton (arrows ±1, Page Up / Down ±10)
- A refused order keeps the button focusable and names the reason, linked by aria-describedby
- Fills, working orders and cancellations are announced in a polite live region
Motion
- Symbol or range
- The chart reveals left to right (760ms)
- Prices
- Roll on change; the last-price tag glides (600ms)
- Placing
- A scanner, then the order rises into the list
- Cancel
- CANCELLED, fades, then leaves (900ms)
Responsive
- Under 820px (container width) the watchlist and ticket move under the chart.
Performance
- Candles are drawn as a handful of SVG paths, not one element each; sparklines are cached per series.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
