# Chart Order Book

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

- id: `chart-order-book`
- Page: https://agentic-ui-kit.com/components/chart-order-book
- Live preview: https://agentic-ui-kit.com/live/component/chart-order-book

## Install

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

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** bid-ask-ladder, cumulative-depth-chart, depth-bars-per-level, price-grouping, spread-and-mid-readout, level-inspection, keyboard-navigation, empty-states, responsive-svg
- **Intents:** monitor-live, show-composition, explore-detail, track-status
- **Suits domains:** fintech, finance, analytics, operations, saas
- **Interaction:** price-grouping, level-hover-inspect, keyboard-navigation, retry
- **Screen role:** overview
- **Density:** compact
- **Dark mode:** yes
- **Use it 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, market maker liquidity view for deciding execution size
- **Avoid when:** the series is temporal and not a liquidity-by-price snapshot (use chart-candlestick), only the last price or the aggregate spread is needed, with no levels (use a stat card), the book has hundreds of levels per side that require virtualization and incremental streaming
- **Preserve when adapting:** bid-ask-ordering-around-the-spread, cumulative-depth-semantics, keyboard-contract, loading-and-error-announcement
- **Replace when adapting:** symbol-and-currency-labels, price-and-size-precision, tick-size-ladder, book-data-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Used in:** Fintech Trading (analytics live) (blueprint)
- **Registry dependencies:** lib-primitives