BuyBuy Agentic UI Kit

Chart Order Book

Spot order book of a crypto exchange with adjustable price grouping.

Full screen Try a theme

What it's for

Spot order book of a crypto exchange with adjustable price grouping.
FX market depth with one side much more liquid than the other.
Trading panel showing spread, mid and resting size per level.

For the series is temporal and not a liquidity-by-price snapshot, use Chart Candlestick.

Includes

Bid ask ladder
Cumulative depth chart
Depth bars per level
Price grouping
Spread and mid readout
Level inspection
Keyboard navigation
Empty states

Works with

Radix UI primitives (the registry variant it ships in)
React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
Your theme tokens, in light and dark mode
1 template or blueprint on this site use it (below)

Install

Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.

Agentic UI CLI

agentic-ui add chart-order-book

Installs through shadcn and adapts the component to your design tokens.

shadcn CLI

npx shadcn@4.17.0 add @agentic-ui/chart-order-book

Used in

Blueprint Fintech Trading (analytics live)

Type: Block
Variants: Radix UI
Themes: Light and dark
Widths: Preview it at desktop, tablet and mobile widths above.
Motion: Animated, with a reduced-motion fallback

npm packages: None beyond your project's React and Next.js
Registry dependencies: lib-primitives
Files: 1 file
components/agentic-ui/chart-order-book/index.tsx