Order book — Björk UI

Components•Order book

Order book

A live order book: asks above the spread and bids below, or side by side, with cumulative depth bars behind every level. Snapshots and deltas are batched to one paint a frame, changed levels flash, and the spread row reads last price with its direction. Hover or arrow through the levels for size, notional and distance from mid; click one to send its price to your order form.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/order-book

How to use

import { useEffect, useRef } from "react";import { OrderBook, createOrderBookFeed, type OrderBookHandle } from "@/components/bjork-ui/charts/order-book";const book = useRef<OrderBookHandle>(null);// Swap the simulated feed for your socket: send the snapshot, then deltas (size 0 removes a level).useEffect(() => {  const feed = createOrderBookFeed();  return feed.subscribe((msg) => book.current?.apply(msg));}, []);<OrderBook  ref={book}  tickSizes={[0.05, 0.1, 0.5, 1]}  onPriceSelect={(level) => setLimitPrice(level.price)}/>

Price (USD)Size (KSTL)Total

KSTL-USD depth
Side	Price	Size	Cumulative
Bid	101.15	19	19
Bid	101.10	79	98
Bid	101.05	87	185
Bid	101.00	117	302
Bid	100.95	60	362
Bid	100.90	57	419
Bid	100.85	46	465
Bid	100.80	35	500
Bid	100.75	130	630
Bid	100.70	711	1.3K
Bid	100.65	437	1.8K
Bid	100.60	91	1.9K
Bid	100.55	153	2K
Bid	100.50	55	2.1K
Bid	100.45	66	2.1K
Bid	100.40	163	2.3K
Bid	100.35	162	2.5K
Bid	100.30	165	2.6K
Bid	100.25	158	2.8K
Bid	100.20	948	3.7K
Bid	100.15	195	3.9K
Bid	100.10	163	4.1K
Bid	100.05	208	4.3K
Bid	100.00	184	4.5K
Bid	99.95	865	5.4K
Bid	99.90	218	5.6K
Bid	99.85	206	5.8K
Bid	99.80	78	5.9K
Bid	99.75	86	5.9K
Bid	99.70	276	6.2K
Bid	99.65	213	6.4K
Bid	99.60	110	6.5K
Bid	99.55	101	6.6K
Bid	99.50	100	6.7K
Bid	99.45	447	7.2K
Bid	99.40	82	7.3K
Bid	99.35	104	7.4K
Bid	99.30	167	7.5K
Bid	99.25	307	7.8K
Bid	99.20	236	8.1K
Bid	99.15	80	8.2K
Bid	99.10	315	8.5K
Bid	99.05	142	8.6K
Bid	99.00	197	8.8K
Bid	98.95	177	9K
Bid	98.90	263	9.3K
Bid	98.85	218	9.5K
Bid	98.80	303	9.8K
Ask	101.20	125	125
Ask	101.25	73	198
Ask	101.30	51	249
Ask	101.35	46	295
Ask	101.40	61	356
Ask	101.45	49	405
Ask	101.50	102	507
Ask	101.55	107	614
Ask	101.60	121	735
Ask	101.65	54	789
Ask	101.70	42	831
Ask	101.75	108	939
Ask	101.80	87	1K
Ask	101.85	195	1.2K
Ask	101.90	421	1.6K
Ask	101.95	137	1.8K
Ask	102.00	56	1.8K
Ask	102.05	229	2.1K
Ask	102.10	236	2.3K
Ask	102.15	146	2.4K
Ask	102.20	202	2.6K
Ask	102.25	134	2.8K
Ask	102.30	110	2.9K
Ask	102.35	262	3.2K
Ask	102.40	189	3.3K
Ask	102.45	109	3.5K
Ask	102.50	199	3.7K
Ask	102.55	173	3.8K
Ask	102.60	99	3.9K
Ask	102.65	222	4.1K
Ask	102.70	308	4.5K
Ask	102.75	269	4.7K
Ask	102.80	183	4.9K
Ask	102.85	176	5.1K
Ask	102.90	450	5.5K
Ask	102.95	347	5.9K
Ask	103.00	204	6.1K
Ask	103.05	299	6.4K
Ask	103.10	307	6.7K
Ask	103.15	224	6.9K
Ask	103.20	327	7.2K
Ask	103.25	175	7.4K
Ask	103.30	218	7.6K
Ask	103.35	248	7.9K
Ask	103.40	161	8K
Ask	103.45	359	8.4K
Ask	103.50	397	8.8K
Ask	103.55	316	9.1K

Click a level to fill the order ticket