Order Book

Beta

Sell orders above the current price and buy orders below, each with a depth bar sized by its total.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add order-book
Also works with shadcn: npx shadcn@latest add @ritla/order-book
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

order-book.tsx

import { OrderBook } from "@/components/ui/order-book";<OrderBook asks={asks} bids={bids} price={58.33} change={0.12} labels={labels} />

Prop	Type	Default	Description
`asks / bids`	`{ price, amount }[]`	None	Sell levels (closest last) and buy levels (closest first).
`price / change`	`number`	None	The current price and its change in percent.
`priceDecimals`	`number`	`2`	Digits after the point for prices.
`labels`	`object`	None	Headers, group names and “Spread”, in the page language.

A table (role="table") with column headers, and named groups for sell and buy orders.
Red and green are repeated by position: sells above the price, buys below.

The columns mirror: price on the right, total on the left; depth bars grow from the left.