Order book

A React component in Beamline's Trading category.

Asks, spread and bids with cumulative depth bars, grouping, change flashes and keyboard price picking.

Use it for

Any order-entry screen: shows liquidity and lets the trader pick a price.

Not for

Visualising liquidity over a price range → depth-chart.

Anatomy

header (title, stale chip, grouping select)
column headers
asks (reversed)
spread row (last price + ▲/▼, spread and %)
bids
row (price, size, total, depth bar from the inline end)

Variants

density: compact (20px rows), default (24px), comfortable (28px)

States

live
grouped
stale (caller's chip in the header; levels stay readable and pickable)
empty
row hover
row focus (inset ring)
Density: explicit instance prop, then scoped component default, then managed root density; omitted static-scope density stays inherited. Changes keep row identity and focus.

Keyboard

Tab enters the rows (one tab stop)
↑/↓, Home/End move
Enter/Space sends the price to onPriceSelect

Motion

A changed size tints its cell in its side's colour and fades over 600ms; nothing moves, so a price stays where the eye left it. Row hover arrives at 0ms and leaves over --pui-motion-out. Reduced motion: no tint fade, values still update.

Props

Prop	Type	Default	Description
`bids / asks` (required)	`Level[] ([price, size])`	—
`tick`	`number`	—
`groupings`	`number[]`	—
`grouping / onGroupingChange`	`number`	—
`depth`	`number`	`12`
`last / lastDirection`	`number / 'up'\|'down'`	—
`onPriceSelect`	`(price, side) => void`	—
`density`	`'compact'\|'default'\|'comfortable'`	—	Row height 20 / 24 / 28 px. Omitted: follows the nearest scope's density (UIRoot density / data-density); an explicit value wins.
`stale`	`ReactNode`	—	Caller-owned stale description ("Stale · 12s"), shown as a warning chip with a clock in the header. Levels stay readable and pickable.
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`OrderBookClassNames`	—

Import

import { OrderBook } from "@/components/order-book/order-book";

Get it

Order book 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 · Connect your agent