Order Book
Bids and asks with cumulative depth. The bar is the running total from the top of book, not the size at that level — what matters when taking liquidity is how much sits between you and a price.
src/components/ui/order-book.tsxAbout
From the component's own source, where it was written.
Bids and asks with cumulative depth.
The depth bar is the *cumulative* total from the top of book down, not the size at that single level. Per-level bars are the common mistake and they misrepresent the book completely: what matters when you are about to take liquidity is how much sits between you and a price, which is a running sum.
Asks are rendered ascending but displayed bottom-up so the spread sits in the middle, which is the convention every trader reads without thinking.
Install
npx astralyx-ui add order-book
Usage
import { OrderBook } from '@/components/ui/order-book'
<OrderBook bids={bids} asks={asks} quoteSymbol="USD" baseSymbol="BTC" />Composer
Change the props and the source below follows.
<OrderBook bids={bids} asks={asks} depth={6} />Examples
Book
<OrderBook bids={bids} asks={asks} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
OrderBook
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| bids | OrderLevel[] | required | { price, size }. Sorted internally, so the caller need not. |
| asks | OrderLevel[] | required | { price, size }. Sorted internally, so the caller need not. |
| depth | number | 8 | Per-level bars are the common mistake and misrepresent the book — this is a running sum on one shared scale across both sides. |
| pricePrecision | number | 2 | — |
| sizePrecision | number | 4 | — |
| locale | string | 'en-GB' | — |
| quoteSymbol | string | — | — |
| baseSymbol | string | — | — |
| totalHeader | ReactNode | 'Total' | — |
| spreadLabel | ReactNode | 'Spread' | — |
Types
OrderLevel
Bids and asks with cumulative depth.
| Field | Type | Description |
|---|---|---|
| price | number | — |
| size | number | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| layout | asks bottom-up | So the spread sits in the middle, which is the convention traders read without thinking. |