# Order book

A React component in [Beamline](https://beamline.io/)'s [Trading](https://beamline.io/components/trading) category. Live demo: https://beamline.io/components/order-book

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](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Trading

- [Depth chart](https://beamline.io/components/depth-chart): Cumulative bid and ask depth as stepped areas around the mid, with hover readout.
- [Funding countdown](https://beamline.io/components/funding-countdown): Perpetual funding rate with who pays, and a live countdown ring to the next funding.
- [Market heatmap](https://beamline.io/components/market-heatmap): Treemap of markets sized by weight and coloured by change, grouped by sector, with hatched no-data tiles.
- [Order ticket](https://beamline.io/components/order-ticket): Buy/sell order entry with limit, market and stop types, % of balance, inline validation and a live cost summary.
- [Positions table](https://beamline.io/components/positions-table): Open positions with live unrealised PnL, liquidation warnings and close actions.
- [Price chart](https://beamline.io/components/price-chart): Candles, line or area price chart with volume, OHLC legend and reference lines, built for live ticks.
- [Price ticker](https://beamline.io/components/price-ticker): Symbol, last price with a directional flash, 24h change and stats.
- [Ticker tape](https://beamline.io/components/ticker-tape): A continuously scrolling row of symbols with price, change and mini trend; pauses on hover and focus.
- [Trades tape](https://beamline.io/components/trades-tape): Recent trades, newest first, with side glyphs, large-print marking and one-time arrival flashes.
- [Watchlist](https://beamline.io/components/watchlist): A selectable, sortable list of markets with mini trends, prices, changes and stars.