# Trading terminal

> Live price, candlesticks, a watchlist with sparklines and an order ticket.

Block · Pro · https://lodeui.com/blocks/trading-terminal

## When to use

- Trading, crypto and portfolio products.

## When not to use

- Long-term investing dashboards where live prices aren't needed.

## Installation

```bash
npx shadcn@latest add @lode/trading-terminal
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TradingTerminal } from "@/components/blocks/trading-terminal";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <TradingTerminal />
    </main>
  );
}
```

Built from: Action button, Candlestick chart, Number field, Number ticker, Segmented control, Sparkline

## API reference

### TradingTerminal

Candles with moving averages, a watchlist with sparklines, a live last price and an order ticket that fills. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through watchlist, range control and order ticket |
| ↑ / ↓ | Change quantity in the ticket |
| Enter / Space | Place the order from the focused button |

## Accessibility

- Buy and sell are a labelled toggle with aria-pressed.
- Prices are text with up and down signs, not only colors.

## Motion

- The last price ticks every 2.2 seconds; digits roll.
- Fills slide into the order list.

## Responsive behavior

- The watchlist moves under the chart below 1024px.

## Performance

- One interval drives the live price; it's cleared on unmount.
- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Replace the interval with your WebSocket feed and keep the candle shape.

## Related

- [Candlestick chart](https://lodeui.com/components/candlestick-chart) — OHLC candles with volume, moving averages and a price crosshair.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.