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.
Installation
npx shadcn add @eased-pro/order-bookNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Usage
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: many pairs at once.
- Token Swap: trading against pools instead of a book.