Order Book

Component

About

An animated order book chart that renders bid and ask price levels with cumulative depth bars, spread, and buy/sell volume balance for trading interfaces.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Order Book to your project and fits it to your theme.

Code

How Order Book is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

const bids = [
  { price: 64231.5, size: 1.82 },
  { price: 64230.0, size: 0.94 },
  { price: 64229.25, size: 2.41 },
  { price: 64228.0, size: 0.63 },
  { price: 64227.5, size: 3.12 },
  { price: 64226.0, size: 1.05 },
  { price: 64225.25, size: 0.48 },
  { price: 64224.0, size: 2.9 },
  { price: 64223.5, size: 1.17 },
];

const asks = [
  { price: 64233.0, size: 1.24 },
  { price: 64234.25, size: 0.77 },
  { price: 64235.0, size: 2.05 },
  { price: 64236.5, size: 0.91 },
  { price: 64237.0, size: 1.63 },
  { price: 64238.25, size: 0.55 },
  { price: 64239.0, size: 2.72 },
  { price: 64240.5, size: 1.09 },
  { price: 64241.0, size: 0.83 },
];

export default function OrderBookDemo() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <OrderBook bids={bids} asks={asks} baseSymbol="BTC" quoteSymbol="USD" />
    </div>
  );
}