Order book
| Price | Size | Total |
|---|---|---|
| 184.28 | 201 | 6.9K |
| 184.03 | 387 | 6.7K |
| 183.78 | 794 | 6.3K |
| 183.53 | 1K | 5.5K |
| 183.28 | 834 | 4.5K |
| 183.03 | 1.5K | 3.7K |
| 182.78 | 1.8K | 2.1K |
| 182.53 | 356 | 356 |
| 182.41 | Spread 0.25 · 0.137% | |
| 182.28 | 1.1K | 1.1K |
| 182.03 | 626 | 1.7K |
| 181.78 | 207 | 1.9K |
| 181.53 | 189 | 2.1K |
| 181.28 | 942 | 3K |
| 181.03 | 1.3K | 4.3K |
| 180.78 | 991 | 5.3K |
| 180.53 | 561 | 5.9K |
Usage
Import the component and the stylesheet once. See Getting started to install the package.
import { OrderBook } from '@lilt-ui/charts/finance';
import '@lilt-ui/charts/styles.css';<OrderBook title="SOL order book" bids={book.bids} asks={book.asks} />Omit title to leave out the visible title. Set header={false} to remove the whole header, and use aria-label to name a chart inside your own card. surface="ghost" controls only the visual frame. See Card composition.
Data
The ladder shows the best levels on each side: asks above, highest first, and bids below, so the best prices meet at the spread row. Each level’s bar is its running total from the spread outward. Pass new bids and asks as the book updates and changed levels flash once; reduced motion turns that off.
const book = {
bids: [{ price: 182.28, size: 1050 } /* …resting buy orders */],
asks: [{ price: 182.53, size: 356 } /* …resting sell orders */],
};
<OrderBook title="SOL order book" bids={book.bids} asks={book.asks} levels={8} />Props
Every prop OrderBook accepts, in the order you are likely to reach for them.
| Prop | Type | Description |
|---|---|---|
header | boolean | False removes the caption; column headings remain. Defaults to true. |
aria-label | string | Accessible name, independent of the visible title. |
title | string | Optional visible table caption. Also names the card unless aria-label is set. |
bids | { price, size }[] | Resting buy orders, in any order. |
asks | { price, size }[] | Resting sell orders, in any order. |
levels | number | Levels shown on each side of the spread. Defaults to 8. |
depth | boolean | Draws each level's bar as a solid block with a lit roof and a shaded end. |
valueFormat | Intl.NumberFormatOptions | Price format. Two decimals by default. |
sizeFormat | Intl.NumberFormatOptions | Size format. Compact numbers by default. |
flash | boolean | Highlight levels whose size changed. Defaults to true. |
surface | 'elevated' | 'outline' | 'ghost' | Card treatment. |
loading | boolean | Shows a neutral loading skeleton, not data. |
loadingStyle | 'shimmer' | 'draw' | 'breathe' | Shimmer sweeps a highlight over still shapes; draw reveals them in order; breathe lets them settle. Follows the selected look, including depth, and respects reduced motion. |
empty | 'dots' | 'shape' | ReactElement | null | What the card shows when the period has no data. Dots (default) gathers a quiet dot field around the message; shape lays the chart’s own outline behind it. Pass `<ChartEmpty>` with your own words, any element of your own, or null for nothing. Both looks stay still, so empty never reads as loading, and the headline reads a dash, never zero. |
motion | 'auto' | 'none' | None turns off decorative motion. |
locale | string | Locale used for number formatting. Defaults to en-US. |
className | string | Additional class on the card frame. |
style | CSSProperties | ChartStyle | Inline styles and scoped --lilt-* chart variables. |