Spark UI
Back to UI Kit

Depth Book

A live order-book depth chart with mirrored stepped bid and ask walls that morph on every tick.

Interactive Stage Preview

Customize

5 options
Bid Color
Ask Color
Price Levels
22
Live Ticks
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add depth-book

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#4ade80'Bid side color.
askColorstring (hex)'#ff8a3d'Ask side color.
levelsnumber22Steps on each side of the book.
livebooleantrueRefresh the book on an interval.
speednumber100Playback speed of entry and transition animations, as a percentage.