KQ-621 · ORDER/BOOK

Order Book

A two-sided price ladder where asks stack above the spread band and bids below, each row laid over a depth bar scaled to the deeper side so the halves stay comparable. A new price level slides in from the ladder's outer edge on snap while a filled level drains toward the touch on glide and an emptied one collapses out on the exit ease; the spread band breathes on a slow mirrored tween that stops while the document is hidden. It is a real grid: a roving tabindex puts ArrowUp and ArrowDown through every rung across the spread, Home and End jump to the ends, and each row speaks the cumulative depth the hover reading shows.

KQ-621 · ORDER/BOOK

BSN/USDBook

PriceSizeTotal

$24.361601,230

$24.312101,070

$24.27320860

$24.24120540

$24.21240420

$24.19180180

$0.03 · 12 bp

$24.16210210

$24.13160370

$24.11340710

$24.07120830

$24.022601,090

$23.981901,280

Spread 0.03 · Touch 24.16 / 24.19 · Reading —

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/order-book

Props

bids: BookLevel[]; default —; Buy levels, best (highest) first.
asks: BookLevel[]; default —; Sell levels, best (lowest) first.
depth: number; default 6; Rows drawn per side; deeper levels fall off the ladder.
symbol: string; default "BSN/USD"; The pair the ladder is for; names the grid for assistive technology.
sizeUnit: string; default "BSN"; Unit printed after sizes and spoken in row labels.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Turns money into its printed string. The default pins an explicit locale so server and client agree.
formatSize: (size: number) => string; default Intl.NumberFormat("en-US"); Turns a size into its printed string.
onLevelRead: (reading: LevelReading | null) => void; default —; Fires from the pointer or focus event that changed the read level, with the side, price, size and cumulative depth, and with null when the pointer leaves.

Prop	Type	Default	Description
bids	BookLevel[]	—	Buy levels, best (highest) first.
asks	BookLevel[]	—	Sell levels, best (lowest) first.
depth	number	6	Rows drawn per side; deeper levels fall off the ladder.
symbol	string	"BSN/USD"	The pair the ladder is for; names the grid for assistive technology.
sizeUnit	string	"BSN"	Unit printed after sizes and spoken in row labels.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Turns money into its printed string. The default pins an explicit locale so server and client agree.
formatSize	(size: number) => string	Intl.NumberFormat("en-US")	Turns a size into its printed string.
onLevelRead	(reading: LevelReading \| null) => void	—	Fires from the pointer or focus event that changed the read level, with the side, price, size and cumulative depth, and with null when the pointer leaves.