‹ components

OrderBook

draftv0.9.0·open in canvas

Bid/ask depth table for trading terminals: tick aggregation, side view modes, cumulative depth, and stale-feed states.

Installnpx shadcn add @cids/order-book
Live demo
Order book
Price (USDT)Size (SOL)Depth
Mid184.15
B 54.61%
45.39% S

selected limit price: 184.12

Motion · tap to replay

honors reduced-motion

Filter/opacity transition for stale masking, row hover color transition, ratio/depth width updates. Motion is decorative; the book remains readable without it.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { OrderBook } from "@/design-system";

<OrderBook
  asks={asks}
  bids={bids}
  midPrice={184.26}
  baseLabel="SOL"
  quoteLabel="USDT"
  onPriceSelect={(price) => setLimitPrice(String(price))}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

defaultloading skeletonemptyerror with retrymild stalesevere stalefrozen stale with reconnectasks-onlybids-onlymixedcumulative bars on/offselectable rows on/off.

Bid/ask depth table for trading terminals: tick aggregation, side view modes, cumulative depth, and stale-feed states.

Anatomy

+ Order book                    Stale 7s
+ [both] [asks] [bids]             [0.01 v]
+ Price (USDT)        Size (SOL)   Depth
+ 184.38              102.4        ----     ask rows, sell text + depth fill
+ 184.31               88.1        ---
+ Mid 184.26
+ 184.22              120.9        -----    bid rows, buy text + depth fill
+ 184.18               72.5        --
+ B 48.30%  =========  51.70% S

Props

PropTypeDefaultNotes
asks / bidsOrderBookLevel[]--Raw levels. Asks sort low to high; bids sort high to low after aggregation.
midPricenumber null`derived from best ask/bidCenter row.
valueFormat / sizeFormat(value:number)=>stringbuilt-in formattersCaller owns exchange-specific decimals.
quoteLabel / baseLabelstringUSDT / BASEHeader units.
view / defaultView / onViewChangeOrderBookViewmixedControlled or uncontrolled asks/mixed/bids view.
tick / defaultTick / tickOptions / onTickChangenumberdefaultTickOptions(mid)Controlled or uncontrolled tick aggregation.
showCumulativeBarsbooleantrueAdds right-side cumulative depth bars.
loadingbooleanfalseSkeleton rows.
errorstring null`--Inline error state.
stale{ level; secondsSinceUpdate? }--mild shows a small pill; severe/frozen blur rows and show updating overlay.
onReconnect() => void--Adds retry/reconnect action in error/frozen states.
onPriceSelect(price, side) => void--When provided, rows become buttons that fill a price input.
rowsPerSidenumber8Mixed view rows per side; one-side views render at least 16.
aria-labelstringOrder bookNames the region.
classNamestring--cn-merged.

Motion

Filter/opacity transition for stale masking, row hover color transition, ratio/depth width updates. Motion is decorative; the book remains readable without it.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.