Order Book

A trading ladder with cumulative depth bars, a spread row, and flashing updates in live mode.

Ladder

@spectrumui/order-book
SOL Order book
PriceSizeTotal
  • $247.208168.3K
  • $247.051.5K7.5K
  • $246.909386.1K
  • $246.751.9K5.1K
  • $246.601.7K3.2K
  • $246.453301.5K
  • $246.303491.2K
  • $246.15527805
  • $246.00278278
$245.85spread $0.30 · 0.122%
  • $245.70215215
  • $245.55448663
  • $245.40297960
  • $245.255911.6K
  • $245.106352.2K
  • $244.958263K
  • $244.807193.7K
  • $244.656234.4K
  • $244.501.1K5.5K

live — flashing updates

SOL Order bookLive
PriceSizeTotal
  • $247.208168.3K
  • $247.051.5K7.5K
  • $246.909386.1K
  • $246.751.9K5.1K
  • $246.601.7K3.2K
  • $246.453301.5K
  • $246.303491.2K
  • $246.15527805
  • $246.00278278
$245.85spread $0.30 · 0.122%
  • $245.70215215
  • $245.55448663
  • $245.40297960
  • $245.255911.6K
  • $245.106352.2K
  • $244.958263K
  • $244.807193.7K
  • $244.656234.4K
  • $244.501.1K5.5K

ETH

ETH Order book
PriceSizeTotal
  • $3,846.201161K
  • $3,845.80331932
  • $3,845.40110601
  • $3,845.00155491
  • $3,844.60135336
  • $3,844.2069201
  • $3,843.8064132
  • $3,843.404268
  • $3,843.002626
$3,842.60spread $0.80 · 0.021%
  • $3,842.20119119
  • $3,841.8048167
  • $3,841.4095262
  • $3,841.0067329
  • $3,840.60106435
  • $3,840.20348783
  • $3,839.80121904
  • $3,839.401871.1K
  • $3,839.001661.3K

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

  • chart-engine.tsxcomponents/spectrumui/charts/chart-engine.tsx
  • order-book.tsxcomponents/spectrumui/charts/order-book.tsx

There is nothing to install — this chart draws its own SVG and imports only @/lib/utils.

Usage

import { OrderBookLadder } from '@/components/spectrumui/charts/order-book';

<OrderBookLadder book={book} symbol="SOL" live />
  • Hovering a row highlights every level between it and the touch — the sweep cost.
  • live re-derives the book from a seeded nonce, so it stays deterministic across renders.

Props

PropTypeDefaultDescription
bookOrderBookSOL_LADDERMid, spread, and the levels to ladder out.
symbolstring'SOL'Ticker shown in the header.
livebooleanfalsePerturb resting size on an interval and flash the rows that moved.
status'ready' | 'loading' | 'empty' | 'error''ready'Which state to render. All four reserve the same frame height, so nothing shifts when data lands.
onRetry() => void-Called by the retry button in the error state. Omit it and no button is shown.
classNamestring-Merged onto the root element.