Order book

Order book
Side	Price	Size	Cumulative
Ask	100.50	178	670
Ask	100.40	156	492
Ask	100.30	134	336
Ask	100.20	112	202
Ask	100.10	90	90
Bid	99.90	120	120
Bid	99.80	102	222
Bid	99.70	84	306
Bid	99.60	66	372
Bid	99.50	48	420

When to use #

Use it for

Market screens showing resting orders.
Anywhere two sides meet at a price.

Skip it when

There is only one side.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/order-book.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { OrderBook } from "@/components/ui/order-book"

export function BookDepth() {
  const bids = [99.9, 99.8, 99.7, 99.6, 99.5].map((price, index) => ({ price, size: 120 - index * 18 }));
  const asks = [100.1, 100.2, 100.3, 100.4, 100.5].map((price, index) => ({ price, size: 90 + index * 22 }));
  return (
    <div className="w-full max-w-sm">
      <OrderBook label="Order book" bids={bids} asks={asks} levels={5} />
    </div>
  );
}

API reference #

OrderBook

component

PropTypeDefault

label *string—

bids *readonly BookLevel[]—

asks *readonly BookLevel[]—

levelsnumber8

formatPrice((price: number) => string)(price) => price.toFixed(2)

formatSize((size: number) => string)numberText

loadingboolean—

errorstring—

classNamestring—

It exposes group and status semantics, with aria-label, aria-hidden and aria-busy kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.