# Order Book

> An animated order book for React and shadcn, with depth bars, a depth chart and price grouping.

A live order book: depth bars grow out from the spread on one scale for both sides, a changed level washes once, the mid price and spread roll, and a mirrored cumulative depth chart morphs underneath. Price grouping built in.

- Tier: Eased Pro
- Interaction: Loading
- Page: https://eased.dev/components/order-book
- Installs: motion

## Install

Order Book ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/order-book
```

A live bid/ask book with depth bars, one-shot level washes, a rolling mid and spread, and a mirrored depth chart, built on realtime-core's depth model.

## When to use

- The depth panel of a trading screen for one pair.
- Showing where liquidity sits, at a glance, beside a chart or swap.

## When not to use

- A trade history or fills list: use a table with live rows.
- Price over time: use a line or candlestick chart.

## Usage

```tsx example.tsx
import { OrderBook } from "@/components/eased/order-book/order-book";

<OrderBook book={{ bids, asks }} group={0.5} rows={8} base="BTC" quote="USD" />
```

`bids` are best (highest) first, `asks` best (lowest) first, each `{ price, size }`. Pass a new `book` on every update.

## API reference

### OrderBook

| Prop | Type | Default | Description |
|---|---|---|---|
| `book` | `{ bids: BookLevel[]; asks: BookLevel[] }` | | The live book. |
| `group` | `number` | `0` | Price grouping; bids bucket down, asks up, sizes add. |
| `rows` | `number` | `8` | Levels per side. |
| `priceDecimals` | `number` | grouping's | Price fraction digits. |
| `sizeDecimals` | `number` | `4` | Size fraction digits. |
| `base` / `quote` | `string` | `"BTC"` / `"USD"` | Column labels and the mid's currency. |
| `depthChart` | `boolean` | `true` | The mirrored cumulative depth chart. |
| `locale` | `Intl.LocalesArgument` | `"en-US"` | Number formats. |

`groupLevels(levels, step, side)` is exported for grouping elsewhere.

## Accessibility

- An ARIA table with a Bids and an Asks row group; each row reads its side, price and size. The depth chart is decorative (`aria-hidden`); the table carries the data.
- Washes are colour plus opacity only and never the sole signal.

## Motion

Depth bars are cumulative, on one scale for both sides, and grow out from the spread on the snappy spring (transform only). A level whose size changes washes once (in 120ms, out 800ms). The mid price rolls and tints by direction; the spread rolls. The depth chart's paths morph on the smooth spring. Rows are positions, so a moving market slides values through still rows. Reduced motion: bars and chart jump; washes stay.

## Notes for AI

Pick it for a single pair's depth. Feed it raw levels; it computes totals, shares, spread and flashes. Use `group` for the precision control instead of grouping yourself.

Don't key rows by price or animate rows in and out: that reshuffles the book on every tick. Pair it with a pause button when the feed autoplays.

## Related

- [Price Ticker](/components/price-ticker): many pairs at once.
- [Token Swap](/components/token-swap): trading against pools instead of a book.